/* ============================================
   Design Token System — Portfolio Site
   程序员个人作品集官网设计系统
   使用 @supports 实现 OKLCH 渐进增强，微信等旧浏览器降级到 hex
   ============================================ */

:root {
  /* --- Brand Color: Deep Indigo + Amber Accent --- */
  --brand-h: 243;

  /* Primary Palette (hex 作为所有浏览器的默认值) */
  --color-primary-50:  #f3f5ff;
  --color-primary-100: #e8ecfe;
  --color-primary-200: #d4dbfc;
  --color-primary-300: #b3bff9;
  --color-primary-400: #8899f5;
  --color-primary-500: #5c6ff2;
  --color-primary-600: #4054e0;
  --color-primary-700: #3040c0;
  --color-primary-800: #2430a0;
  --color-primary-900: #1a2480;

  /* Accent (Amber / Gold) */
  --color-accent-400: #f5d060;
  --color-accent-500: #ebb820;
  --color-accent-600: #c49a10;

  /* Tinted Neutrals */
  --color-neutral-50:  #f8f9fc;
  --color-neutral-100: #eef0f6;
  --color-neutral-200: #e1e4ed;
  --color-neutral-300: #cdd1de;
  --color-neutral-400: #a9aec0;
  --color-neutral-500: #898ea3;
  --color-neutral-600: #696f84;
  --color-neutral-700: #505668;
  --color-neutral-800: #383d4c;
  --color-neutral-900: #1a1c2e;
  --color-neutral-950: #101118;

  /* Semantic Colors */
  --color-success:    #10b981;
  --color-success-bg: #d1fae5;
  --color-warning:    #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-error:      #ef4444;
  --color-error-bg:   #fee2e2;
  --color-info:       #3b82f6;
  --color-info-bg:    #dbeafe;

  /* --- Surface Tokens (Light Mode) --- */
  --surface-page:    #fcfcfe;
  --surface-card:    #ffffff;
  --surface-raised:  #f8f9fc;
  --surface-overlay: rgba(30, 32, 48, 0.6);

  /* Text */
  --text-primary:   #1a1c2e;
  --text-secondary: #5a6072;
  --text-tertiary:  #8e93a4;
  --text-on-dark:   #f5f6fa;
  --text-on-brand:  #ffffff;

  /* Borders */
  --border-subtle:  #e1e4ed;
  --border-default: #cdd1de;
  --border-strong:  #a9aec0;

  /* Code colors */
  --code-bg:     #f1f3f8;
  --code-border: #d9dce6;

  /* --- Typography --- */
  --font-display: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  clamp(2rem, 4vw + 1rem, 3rem);
  --text-5xl:  clamp(2.5rem, 5vw + 1rem, 4rem);
  --text-hero: clamp(3rem, 7vw + 1rem, 5.5rem);

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* --- Spacing (8px base) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Border Radius --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px 0 rgba(26, 28, 46, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(26, 28, 46, 0.08),
               0 1px 2px -1px rgba(26, 28, 46, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(26, 28, 46, 0.08),
               0 2px 4px -2px rgba(26, 28, 46, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(26, 28, 46, 0.08),
               0 4px 6px -4px rgba(26, 28, 46, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(26, 28, 46, 0.08),
               0 8px 10px -6px rgba(26, 28, 46, 0.05);
  --shadow-glow:       0 0 0 3px rgba(92, 111, 242, 0.15);
  --shadow-card-hover: 0 20px 40px -12px rgba(92, 111, 242, 0.2);

  /* --- Easing --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* Duration */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-normal:  300ms;
  --dur-slow:    500ms;
  --dur-enter:   600ms;

  /* --- Layout --- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --nav-height: 64px;
  --section-padding: clamp(var(--space-12), 8vw, var(--space-24));
}

/* ============================================
   OKLCH 渐进增强 — 仅支持的浏览器（Chrome 111+, Safari 15.4+）使用 OKLCH
   不支持的浏览器（微信 X5 WebView 等）继续使用上面的 hex 值
   ============================================ */
@supports (color: oklch(0% 0 0)) {
  :root {
    --color-primary-50:  oklch(97% 0.02 250);
    --color-primary-100: oklch(93% 0.04 250);
    --color-primary-200: oklch(87% 0.07 250);
    --color-primary-300: oklch(78% 0.11 250);
    --color-primary-400: oklch(66% 0.15 250);
    --color-primary-500: oklch(55% 0.18 250);
    --color-primary-600: oklch(46% 0.18 250);
    --color-primary-700: oklch(38% 0.16 250);
    --color-primary-800: oklch(30% 0.13 250);
    --color-primary-900: oklch(22% 0.09 250);

    --color-accent-400: oklch(84% 0.16 75);
    --color-accent-500: oklch(75% 0.18 75);
    --color-accent-600: oklch(64% 0.17 75);

    --color-neutral-50:  oklch(98% 0.005 250);
    --color-neutral-100: oklch(95% 0.008 250);
    --color-neutral-200: oklch(91% 0.010 250);
    --color-neutral-300: oklch(84% 0.012 250);
    --color-neutral-400: oklch(72% 0.012 250);
    --color-neutral-500: oklch(60% 0.012 250);
    --color-neutral-600: oklch(48% 0.012 250);
    --color-neutral-700: oklch(37% 0.012 250);
    --color-neutral-800: oklch(26% 0.010 250);
    --color-neutral-900: oklch(17% 0.008 250);
    --color-neutral-950: oklch(11% 0.006 250);

    --color-success:    oklch(62% 0.17 155);
    --color-success-bg: oklch(95% 0.04 155);
    --color-warning:    oklch(72% 0.18 85);
    --color-warning-bg: oklch(96% 0.04 85);
    --color-error:      oklch(58% 0.22 25);
    --color-error-bg:   oklch(96% 0.04 25);
    --color-info:       oklch(58% 0.17 240);
    --color-info-bg:    oklch(95% 0.04 240);

    --surface-page:    oklch(99% 0.004 250);
    --surface-card:    oklch(100% 0 0);
    --surface-raised:  oklch(98% 0.006 250);
    --surface-overlay: oklch(15% 0.01 250 / 0.6);

    --text-primary:   oklch(17% 0.008 250);
    --text-secondary: oklch(42% 0.012 250);
    --text-tertiary:  oklch(60% 0.010 250);
    --text-on-dark:   oklch(97% 0.005 250);
    --text-on-brand:  oklch(100% 0 0);

    --border-subtle:  oklch(91% 0.010 250);
    --border-default: oklch(84% 0.012 250);
    --border-strong:  oklch(72% 0.012 250);

    --code-bg:     oklch(96% 0.008 250);
    --code-border: oklch(89% 0.012 250);

    --shadow-xs: 0 1px 2px 0 oklch(17% 0.008 250 / 0.05);
    --shadow-sm: 0 1px 3px 0 oklch(17% 0.008 250 / 0.08),
                 0 1px 2px -1px oklch(17% 0.008 250 / 0.05);
    --shadow-md: 0 4px 6px -1px oklch(17% 0.008 250 / 0.08),
                 0 2px 4px -2px oklch(17% 0.008 250 / 0.05);
    --shadow-lg: 0 10px 15px -3px oklch(17% 0.008 250 / 0.08),
                 0 4px 6px -4px oklch(17% 0.008 250 / 0.05);
    --shadow-xl: 0 20px 25px -5px oklch(17% 0.008 250 / 0.08),
                 0 8px 10px -6px oklch(17% 0.008 250 / 0.05);
    --shadow-glow:       0 0 0 3px oklch(55% 0.18 250 / 0.15);
    --shadow-card-hover: 0 20px 40px -12px oklch(55% 0.18 250 / 0.2);
  }
}

/* ============================================
   Dark Mode
   ============================================ */
[data-theme="dark"] {
  --surface-page:    #1a1d2e;
  --surface-card:    #23273a;
  --surface-raised:  #2b3046;
  --surface-overlay: rgba(10, 12, 20, 0.75);

  --text-primary:   #f0f1f5;
  --text-secondary: #a9aec0;
  --text-tertiary:  #747a90;

  --border-subtle:  #383d4c;
  --border-default: #474d60;
  --border-strong:  #616780;

  --code-bg:     #292d3e;
  --code-border: #3d4254;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
               0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
               0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
               0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 20px 40px -12px rgba(92, 111, 242, 0.3);

  color-scheme: dark;
}

@supports (color: oklch(0% 0 0)) {
  [data-theme="dark"] {
    --surface-page:    oklch(14% 0.008 250);
    --surface-card:    oklch(18% 0.010 250);
    --surface-raised:  oklch(21% 0.012 250);
    --surface-overlay: oklch(8% 0.006 250 / 0.75);

    --text-primary:   oklch(95% 0.005 250);
    --text-secondary: oklch(72% 0.010 250);
    --text-tertiary:  oklch(52% 0.010 250);

    --border-subtle:  oklch(26% 0.010 250);
    --border-default: oklch(32% 0.012 250);
    --border-strong:  oklch(42% 0.012 250);

    --code-bg:     oklch(20% 0.010 250);
    --code-border: oklch(28% 0.010 250);

    --shadow-xs: 0 1px 2px 0 oklch(5% 0 0 / 0.3);
    --shadow-sm: 0 1px 3px 0 oklch(5% 0 0 / 0.4),
                 0 1px 2px -1px oklch(5% 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px oklch(5% 0 0 / 0.4),
                 0 2px 4px -2px oklch(5% 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px oklch(5% 0 0 / 0.5),
                 0 4px 6px -4px oklch(5% 0 0 / 0.3);
    --shadow-card-hover: 0 20px 40px -12px oklch(55% 0.18 250 / 0.3);
  }
}