/* ===================================
 * MD3 Design Tokens
 * Material Design 3 设计令牌
 * =================================== */

:root {
  /* ===================================
   * MD3 Color Roles — Light Theme
   * =================================== */

  /* Primary — #788bc5 (Nao periwinkle) */
  --md-sys-color-primary: #788bc5;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #dde3f5;
  --md-sys-color-on-primary-container: #1a2340;

  /* Secondary — cool purple-gray */
  --md-sys-color-secondary: #6e5e6e;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #f0dff0;
  --md-sys-color-on-secondary-container: #231b23;

  /* Tertiary — warm peach */
  --md-sys-color-tertiary: #8b5a4a;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #ffdcce;
  --md-sys-color-on-tertiary-container: #32170c;

  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  /* Background & Surface */
  --md-sys-color-background: #fffbfc;
  --md-sys-color-on-background: #1C1B1F;
  --md-sys-color-surface: #fffbfc;
  --md-sys-color-on-surface: #1C1B1F;

  /* Surface Variants */
  --md-sys-color-surface-variant: #eedee8;
  --md-sys-color-on-surface-variant: #4f454b;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #f8f2f6;
  --md-sys-color-surface-container: #f3edf0;
  --md-sys-color-surface-container-high: #ede7eb;
  --md-sys-color-surface-container-highest: #e7e1e5;

  /* Outline */
  --md-sys-color-outline: #81757b;
  --md-sys-color-outline-variant: #d2c5cc;

  /* Other */
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #F4EFF4;
  --md-sys-color-inverse-primary: #788bc5;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* ===================================
   * MD3 Elevation (Shadows) — softer, matches homepage
   * =================================== */
  --md-sys-elevation-1: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --md-sys-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --md-sys-elevation-3: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.05);
  --md-sys-elevation-4: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* ===================================
   * MD3 Shape (Border Radius) — slightly smaller to match homepage
   * =================================== */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 6px;
  --md-sys-shape-corner-medium: 10px;
  --md-sys-shape-corner-large: 14px;
  --md-sys-shape-corner-extra-large: 20px;
  --md-sys-shape-corner-full: 9999px;

  /* ===================================
   * Typography Scale
   * UI & Display: Google Sans
   * Body: Noto Sans SC
   * Mono: Google Sans Mono
   * =================================== */
  --md-sys-typescale-font-family: 'Google Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-font-family-display: 'Google Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-font-family-ui: 'Google Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-font-family-mono: 'Google Sans Mono', 'JetBrains Mono', 'Consolas', monospace;

  /* Display — slightly larger, bold sans-serif */
  --md-sys-typescale-display-large: 700 54px/1.15 var(--md-sys-typescale-font-family-display);
  --md-sys-typescale-display-medium: 700 42px/1.2 var(--md-sys-typescale-font-family-display);
  --md-sys-typescale-display-small: 700 34px/1.25 var(--md-sys-typescale-font-family-display);

  /* Headline */
  --md-sys-typescale-headline-large: 600 32px/1.3 var(--md-sys-typescale-font-family);
  --md-sys-typescale-headline-medium: 600 26px/1.35 var(--md-sys-typescale-font-family);
  --md-sys-typescale-headline-small: 600 22px/1.4 var(--md-sys-typescale-font-family);

  /* Title */
  --md-sys-typescale-title-large: 600 22px/1.4 var(--md-sys-typescale-font-family);
  --md-sys-typescale-title-medium: 600 17px/1.5 var(--md-sys-typescale-font-family);
  --md-sys-typescale-title-small: 600 15px/1.45 var(--md-sys-typescale-font-family);

  /* Body — base 17px for better readability */
  --md-sys-typescale-body-large: 400 17px/1.75 var(--md-sys-typescale-font-family);
  --md-sys-typescale-body-medium: 400 15px/1.65 var(--md-sys-typescale-font-family);
  --md-sys-typescale-body-small: 400 13px/1.55 var(--md-sys-typescale-font-family);

  /* Label */
  --md-sys-typescale-label-large: 500 15px/1.4 var(--md-sys-typescale-font-family-ui);
  --md-sys-typescale-label-medium: 500 13px/1.4 var(--md-sys-typescale-font-family-ui);
  --md-sys-typescale-label-small: 500 12px/1.4 var(--md-sys-typescale-font-family-ui);

  /* ===================================
   * MD3 State Layer Opacity
   * =================================== */
  --md-sys-state-hover-opacity: 0.06;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.10;
  --md-sys-state-dragged-opacity: 0.14;

  /* ===================================
   * MD3 Motion (Transitions)
   * =================================== */
  --md-sys-motion-duration-short: 180ms;
  --md-sys-motion-duration-medium: 280ms;
  --md-sys-motion-duration-long: 450ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ===================================
   * Blog-specific tokens
   * =================================== */
  --blog-header-height: 56px;
  --blog-content-max-width: 800px;
  --blog-page-max-width: 1200px;
  --blog-accent-line: 3px;
}

/* ===================================
 * MD3 Color Roles — Dark Theme
 * =================================== */
[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #a3b2e0;
  --md-sys-color-on-primary: #2a3460;
  --md-sys-color-primary-container: #404a78;
  --md-sys-color-on-primary-container: #dde3f5;

  /* Secondary */
  --md-sys-color-secondary: #d5c5d5;
  --md-sys-color-on-secondary: #3a2f3a;
  --md-sys-color-secondary-container: #574e5e;
  --md-sys-color-on-secondary-container: #f0dff0;

  /* Tertiary */
  --md-sys-color-tertiary: #f0b8a0;
  --md-sys-color-on-tertiary: #4a2818;
  --md-sys-color-tertiary-container: #6b3e2e;
  --md-sys-color-on-tertiary-container: #ffdcce;

  /* Error */
  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;

  /* Background & Surface — deep navy matching homepage */
  --md-sys-color-background: #0f0f1a;
  --md-sys-color-on-background: #E6E1E5;
  --md-sys-color-surface: #0f0f1a;
  --md-sys-color-on-surface: #E6E1E5;

  /* Surface Variants — navy card tones */
  --md-sys-color-surface-variant: #2a2a4a;
  --md-sys-color-on-surface-variant: #d2c5cc;
  --md-sys-color-surface-container-lowest: #0a0a14;
  --md-sys-color-surface-container-low: #16213e;
  --md-sys-color-surface-container: #1a1a2e;
  --md-sys-color-surface-container-high: #22223a;
  --md-sys-color-surface-container-highest: #2a2a4a;

  /* Outline */
  --md-sys-color-outline: #7a7096;
  --md-sys-color-outline-variant: #2a2a4a;

  /* Other */
  --md-sys-color-inverse-surface: #E6E1E5;
  --md-sys-color-inverse-on-surface: #313033;
  --md-sys-color-inverse-primary: #788bc5;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
}

/* ===================================
 * Auto Dark Mode (System Preference)
 * =================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Primary */
    --md-sys-color-primary: #a3b2e0;
    --md-sys-color-on-primary: #2a3460;
    --md-sys-color-primary-container: #404a78;
    --md-sys-color-on-primary-container: #dde3f5;

    /* Secondary */
    --md-sys-color-secondary: #d5c5d5;
    --md-sys-color-on-secondary: #3a2f3a;
    --md-sys-color-secondary-container: #574e5e;
    --md-sys-color-on-secondary-container: #f0dff0;

    /* Tertiary */
    --md-sys-color-tertiary: #f0b8a0;
    --md-sys-color-on-tertiary: #4a2818;
    --md-sys-color-tertiary-container: #6b3e2e;
    --md-sys-color-on-tertiary-container: #ffdcce;

    /* Error */
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;

    /* Background & Surface — deep navy matching homepage */
    --md-sys-color-background: #0f0f1a;
    --md-sys-color-on-background: #E6E1E5;
    --md-sys-color-surface: #0f0f1a;
    --md-sys-color-on-surface: #E6E1E5;

    /* Surface Variants — navy card tones */
    --md-sys-color-surface-variant: #2a2a4a;
    --md-sys-color-on-surface-variant: #d2c5cc;
    --md-sys-color-surface-container-lowest: #0a0a14;
    --md-sys-color-surface-container-low: #16213e;
    --md-sys-color-surface-container: #1a1a2e;
    --md-sys-color-surface-container-high: #22223a;
    --md-sys-color-surface-container-highest: #2a2a4a;

    /* Outline */
    --md-sys-color-outline: #7a7096;
    --md-sys-color-outline-variant: #2a2a4a;

    /* Other */
    --md-sys-color-inverse-surface: #E6E1E5;
    --md-sys-color-inverse-on-surface: #313033;
    --md-sys-color-inverse-primary: #788bc5;
  }
}