/* ==========================================================================
   Aeolus Design Tokens — Flat design
   Palette: Primary #2A7FFF · Secondary #7CCBFF · Tertiary #D76000
            Neutral #F7F7F2 · Dark Ink #1F2A44
   Fonts: Manrope (headlines) + Inter (body, label)
   ========================================================================== */

:root {
  /* ---------- Core Palette ---------- */
  --primary:        #2A7FFF;
  --primary-hover:  #1F6FEA;
  --primary-active: #1558C2;
  --primary-soft:   #D9F2FF;   /* Very light blue, for soft backgrounds */
  --primary-tint:   #E9F2FF;   /* Subtle tint */
  --secondary:      #7CCBFF;   /* Lighter blue */
  --secondary-soft: #D9F2FF;

  --tertiary:        #D76000;  /* Warm orange accent */
  --tertiary-hover:  #B84E00;
  --tertiary-soft:   #FDECE0;

  --ink:             #1F2A44;  /* Primary text / dark ink (navy) */
  --ink-hover:       #172036;

  /* ---------- Neutrals (warm cream scale) ---------- */
  --cream-0:  #FFFFFF;
  --cream-50: #FBFBF8;
  --cream-100:#F7F7F2;   /* Page background */
  --cream-200:#EFEFE8;
  --cream-300:#E3E3DB;
  --cream-400:#C9C9BF;
  --cream-500:#A8A89E;
  --cream-600:#7F7F76;
  --cream-700:#5E5E58;
  --cream-800:#3F3F3B;
  --cream-900:#1F1F1D;

  /* ---------- Semantic colors ---------- */
  --success: #2EAE6D;
  --warning: #D76000;     /* Same as tertiary */
  --danger:  #CC2944;
  --info:    #2A7FFF;     /* Same as primary */

  --success-soft: #D6F2E3;
  --warning-soft: #FDECE0;
  --danger-soft:  #FBDFE4;

  /* ---------- Surface ---------- */
  --surface-page:    var(--cream-100);
  --surface-card:    var(--cream-0);
  --surface-sunken:  var(--cream-200);
  --surface-overlay: rgba(31, 42, 68, 0.40);

  /* ---------- Text (backwards compatible tokens) ---------- */
  --text-primary:   var(--ink);
  --text-secondary: var(--cream-700);
  --text-tertiary:  var(--cream-500);
  --text-inverse:   var(--cream-0);

  /* ---------- Borders ---------- */
  --border-subtle:  var(--cream-200);
  --border-default: var(--cream-300);
  --border-strong:  var(--cream-400);

  /* ---------- Legacy aliases (old names used across code) ---------- */
  --brand-primary:       var(--primary);
  --brand-primary-hover: var(--primary-hover);
  --brand-primary-soft:  var(--primary-soft);
  --brand-accent:        var(--tertiary);
  --brand-accent-soft:   var(--tertiary-soft);
  --color-success:       var(--success);
  --color-warning:       var(--warning);
  --color-danger:        var(--danger);
  --color-info:          var(--info);
  --gray-0:   var(--cream-0);
  --gray-50:  var(--cream-50);
  --gray-100: var(--cream-100);
  --gray-200: var(--cream-200);
  --gray-300: var(--cream-300);
  --gray-400: var(--cream-400);
  --gray-500: var(--cream-500);
  --gray-600: var(--cream-600);
  --gray-700: var(--cream-700);
  --gray-800: var(--cream-800);
  --gray-900: var(--ink);
  --gray-950: #0F1525;

  /* ---------- Category colors (output types) ---------- */
  --cat-dashboard: #2A7FFF;    /* Primary blue */
  --cat-report:    #1F2A44;    /* Dark navy */
  --cat-placement: #D76000;    /* Orange */
  --cat-asset:     #7CCBFF;    /* Light blue */

  /* ---------- Spacing ---------- */
  --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;

  /* ---------- Radius (rounded rectangles) ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ---------- Shadows (subtle) ---------- */
  --shadow-xs: 0 1px 2px rgba(31, 42, 68, 0.04);
  --shadow-sm: 0 1px 3px rgba(31, 42, 68, 0.06);
  --shadow-md: 0 4px 14px rgba(31, 42, 68, 0.08);
  --shadow-lg: 0 12px 32px rgba(31, 42, 68, 0.14);
  --shadow-focus: 0 0 0 3px rgba(42, 127, 255, 0.18);

  /* ---------- Typography ---------- */
  --font-display: "Manrope", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  --leading-tight:   1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ---------- Layout ---------- */
  --sidebar-width:   240px;
  --topbar-height:   56px;
  --content-max-width: 1280px;

  /* ---------- Transitions ---------- */
  --transition-fast: 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base: 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   Dark Mode — 以 #1F2A44 為基底
   Remaps existing cream-* / ink / surface tokens, existing CSS keeps working.
   ========================================================================== */
[data-theme="dark"] {
  /* Cream scale re-pointed to dark navy scale */
  --cream-0:   #2A3552;   /* "white cards" → dark navy card */
  --cream-50:  #242F4B;
  --cream-100: #1F2A44;   /* ★ Page bg (user's base color) */
  --cream-200: #34405F;
  --cream-300: #42517A;
  --cream-400: #5D6A92;
  --cream-500: #7C87A8;
  --cream-600: #A3ABC2;
  --cream-700: #C8CDD9;
  --cream-800: #E1E4EC;
  --cream-900: #F4F5F8;

  /* Ink (primary text) inverts to light */
  --ink:        #F2F4F8;
  --ink-hover:  #FFFFFF;

  /* Primary punched up for AA contrast on dark */
  --primary:        #4A96FF;
  --primary-hover:  #63A7FF;
  --primary-active: #2A7FFF;
  --primary-soft:   rgba(74, 150, 255, 0.16);
  --primary-tint:   rgba(74, 150, 255, 0.10);

  --tertiary:       #F07826;
  --tertiary-hover: #FF8A38;
  --tertiary-soft:  rgba(240, 120, 38, 0.18);

  --success:       #4ADE80;
  --warning:       #F59E0B;
  --danger:        #F87171;
  --info:          var(--primary);
  --success-soft:  rgba(74, 222, 128, 0.16);
  --warning-soft:  rgba(245, 158, 11, 0.18);
  --danger-soft:   rgba(248, 113, 113, 0.18);

  --surface-page:    var(--cream-100);
  --surface-card:    var(--cream-0);
  --surface-sunken:  #151E35;
  --surface-overlay: rgba(5, 10, 22, 0.65);

  --text-primary:   var(--ink);
  --text-secondary: var(--cream-600);
  --text-tertiary:  var(--cream-500);
  --text-inverse:   #1F2A44;

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong:  rgba(255, 255, 255, 0.26);

  --brand-primary:       var(--primary);
  --brand-primary-hover: var(--primary-hover);
  --brand-primary-soft:  var(--primary-soft);
  --brand-accent:        var(--tertiary);
  --brand-accent-soft:   var(--tertiary-soft);

  --gray-0:   var(--cream-0);
  --gray-50:  var(--cream-50);
  --gray-100: var(--cream-100);
  --gray-200: var(--cream-200);
  --gray-300: var(--cream-300);
  --gray-400: var(--cream-400);
  --gray-500: var(--cream-500);
  --gray-600: var(--cream-600);
  --gray-700: var(--cream-700);
  --gray-800: var(--cream-800);
  --gray-900: var(--ink);

  --cat-dashboard: #4A96FF;
  --cat-report:    #C8CDD9;
  --cat-placement: #F07826;
  --cat-asset:     #7CCBFF;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(74, 150, 255, 0.28);
}