/* =============================================================
   Wave Developer Studio — Design Tokens
   Colors + Typography (light + dark)
   ============================================================= */

/* --- Webfonts (Google Fonts CDN) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root {
  /* ---------- Color (Light, default) ---------- */
  --bg:           #FFFFFF;
  --bg-soft:      #F7F7F8;
  --bg-mute:      #EFEFF1;

  --text:         #0A0A0A;
  --text-muted:   #6B6B6B;
  --text-faint:   #9A9A9A;

  --border:       #E5E5E5;
  --border-strong:#CFCFCF;

  --accent:       #0233FD;   /* Logo blue (primary brand) */
  --accent-hover: #1730C4;
  --accent-soft:  #E8ECFF;   /* Tinted bg for callouts */

  --shadow:       rgba(0, 0, 0, 0.06);
  --shadow-lg:    rgba(0, 0, 0, 0.10);

  /* Semantic (kept neutral / quiet — brand uses one accent only) */
  --success:      #0E7C3A;
  --warning:      #B5701A;
  --danger:       #B42318;

  /* ---------- Typography ---------- */
  --font-jp:      "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en:      "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    var(--font-en), var(--font-jp);
  --font-mono:    "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale — fluid for hero/section, fixed for body */
  --t-display:    clamp(2.5rem, 6vw, 4.5rem);   /* Hero */
  --t-h1:         clamp(2rem, 4vw, 3rem);
  --t-h2:         clamp(1.75rem, 3vw, 2.5rem);  /* Section title */
  --t-h3:         clamp(1.25rem, 2vw, 1.5rem);
  --t-body:       1rem;       /* 16 */
  --t-body-lg:    1.125rem;   /* 18 */
  --t-small:      0.875rem;   /* 14 */
  --t-micro:      0.75rem;    /* 12 */

  --lh-tight:     1.2;
  --lh-snug:      1.4;
  --lh-normal:    1.6;
  --lh-loose:     1.8;        /* Body default — 余白で語る */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* For all-caps eyebrows */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;     /* Default for headings */
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;          /* Section vertical rhythm */

  /* ---------- Radii (controlled, never blobby) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;           /* Default — buttons, inputs */
  --radius-md: 8px;           /* Cards */
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- Elevation (very restrained) ---------- */
  --elev-0: none;
  --elev-1: 0 1px 2px var(--shadow);
  --elev-2: 0 4px 12px var(--shadow);
  --elev-3: 0 12px 32px var(--shadow-lg);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: var(--space-10);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:      150ms;
  --dur-base:      300ms;
  --dur-slow:      600ms;
}

/* --------- Dark Theme override --------- */
[data-theme="dark"] {
  --bg:           #0A0A0A;
  --bg-soft:      #141414;
  --bg-mute:      #1C1C1C;

  --text:         #F5F5F5;
  --text-muted:   #999999;
  --text-faint:   #666666;

  --border:       #2A2A2A;
  --border-strong:#3D3D3D;

  --accent:       #4A6FFF;   /* Brightened for dark bg */
  --accent-hover: #6B8AFF;
  --accent-soft:  #1A2244;

  --shadow:       rgba(0, 0, 0, 0.4);
  --shadow-lg:    rgba(0, 0, 0, 0.6);
}

/* =============================================================
   Semantic element styles — apply default brand voice on raw HTML
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--text);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p  { line-height: var(--lh-loose); margin: 0; }
small { font-size: var(--t-small); color: var(--text-muted); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Eyebrow / kicker — used above section titles */
.eyebrow {
  font-family: var(--font-en);
  font-size: var(--t-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Display (hero) */
.display {
  font-size: var(--t-display);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}