/* Portfolio design tokens ("Night Glass"). Shared by the homepage and the design-system guide.
   Names describe purpose. Alpha variants derive from base colors with color-mix(),
   so changing --accent updates every tint, line and glow that uses it. */
:root {
  color-scheme: light;

  /* Background: an ivory base lit by three soft blue glows. */
  --bg-deep: #f6f4ef;
  --bg-mid: #f1eee7;
  --bg-end: #f4f1ea;
  --glow-a: color-mix(in srgb, var(--accent) 20%, transparent);
  --glow-b: color-mix(in srgb, var(--accent-2) 16%, transparent);
  --glow-c: color-mix(in srgb, #c9d6f2 35%, transparent);

  /* Text. Contrast on --bg-deep: 16.3 / 9.2 / 6.0, and at least 4.5 on glass over the strongest glow. */
  --text: #15171c;
  --text-soft: #3c4250;
  --text-muted: #565d6d;

  /* Accent */
  --accent: #2f5bd3;
  --accent-strong: #1f43a8;
  --accent-2: #7aa2ff;
  --accent-fg: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);

  /* Glass: translucent white over a background tint, so text keeps its contrast above bright glows. */
  --glass: #ffffffb3;
  --glass-strong: #ffffffe0;
  --glass-border: #0f172a1f;
  --glass-highlight: #ffffff;
  --glass-sheen: #ffffff99;
  --dot-grid: #0f172a2e; /* Faint background dot grid; dark dots so it shows on the light background. */
  --glass-blur: 20px;
  --glass-tint: color-mix(in srgb, var(--bg-deep) 40%, transparent);
  --chip-bg: #0f172a08;
  --line: #0f172a1a;
  --bar-bg: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  --surface-fallback: #ffffffeb;
  --shadow-glass: 0 18px 48px #0f172a14, inset 0 1px 0 var(--glass-highlight);
  --shadow-lift: 0 26px 64px #0f172a1f, inset 0 1px 0 var(--glass-highlight);

  /* Typography */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-display: clamp(60px, 10vw + 24px, 144px);
  --text-h2: clamp(30px, 3vw + 8px, 44px);
  --text-title: clamp(22px, 1vw + 12px, 26px);
  --text-lead: clamp(20px, 1.2vw + 12px, 30px);
  --text-h3: 20px;
  --text-lg: 18px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-label: 11px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-tight: 1.05;
  --leading-heading: 1.3;
  --leading-body: 1.7;
  --leading-relaxed: 1.8;
  --tracking-display: -.055em;
  --tracking-heading: -.035em;
  --tracking-label: .18em;

  /* Space: a 4px scale, named by multiples of 4. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Shape */
  --radius-card: 24px;
  --radius-inner: 16px;
  --radius-pill: 999px;

  /* Motion. JavaScript reads times in ms and distances in px.
     The intro plays once on load; sections and cards revealed by scrolling move more slowly. */
  --ease-out: cubic-bezier(.2, .65, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-reveal: 600ms;
  --dur-reveal-scroll: 1000ms;
  --reveal-distance: 24px;
  --stagger: 70ms;
  --stagger-scroll: 120ms;
  --hover-lift: -2px;

  /* Layout and interaction */
  --page-max: 1200px;
  --gutter: 40px;
  --header-h: 64px;
  --target-min: 44px;
  --focus-width: 2px;
  --focus-offset: 4px;

  /* Shared with the concept illustrations in assets/css/experience-visuals.css. */
  --color-illustration-text: #e3e7f3;
  --color-illustration-accent: #9cb8ff;
}

/* Media queries cannot read custom properties; keep these boundaries in sync with portfolio.css and design-system.css:
   1199 / 1023 / 767 / 359px. */
@media (max-width: 1023px) {
  :root { --gutter: 24px; }
}
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --header-h: 56px;
    --radius-card: 20px;
  }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
}