/* ============================================================
   Routelink Design System — Design Tokens
   v1 · derived from the ROUTELINK Corporate Identity System
   ============================================================
   Layer 1  brand      raw CIS values, never change
   Layer 2  palette    ramps derived from brand
   Layer 3  role       semantic tokens — USE THESE IN COMPONENTS
   ============================================================ */

:root {
  /* ---------- Layer 1 · Brand (from CIS) ---------- */
  --brand-deep-navy:   #002D62;  /* 主色 · PMS 505  */
  --brand-sapphire:    #004A99;  /* 主色           */
  --brand-aero:        #1B5DA5;  /* 輔助色          */
  --brand-turquoise:   #00CED1;  /* 強調色 · PMS 006 */
  --brand-light-grey:  #F4F4F4;  /* 基礎色 · PMS 278 */
  --brand-white:       #FFFFFF;  /* 基礎色 · PMS 004 */

  /* ---------- Layer 2 · Palette ramps ---------- */

  /* Navy — the structural colour. 800 is Deep Navy, 600 is Sapphire. */
  --navy-50:   #EBF4FF;
  --navy-100:  #CCE5FF;
  --navy-200:  #99CAFF;
  --navy-300:  #52A5FF;
  --navy-400:  #007BFF;
  --navy-500:  #0063CC;
  --navy-600:  #004A99;   /* = Sapphire Blue */
  --navy-650:  #1B5DA5;   /* = Aero Blue · hover/mid state */
  --navy-700:  #003B7A;
  --navy-800:  #002D62;   /* = Deep Navy */
  --navy-900:  #002042;

  /* Turquoise — the "alive" colour. 400 is the CIS accent.
     NOTE 400 fails contrast on light backgrounds. See --color-accent. */
  --turq-50:   #E6FBFB;
  --turq-100:  #C0F5F6;
  --turq-200:  #7FEBED;
  --turq-300:  #33DEE0;
  --turq-400:  #00CED1;   /* = Dark Turquoise · fills & dark surfaces only */
  --turq-500:  #00A1A3;
  --turq-600:  #008385;
  --turq-700:  #00797A;   /* accessible on white — text & icons */
  --turq-800:  #005A5C;
  --turq-900:  #00393A;

  /* Cool neutrals — tuned to sit beside navy, not fight it */
  --grey-0:    #FFFFFF;
  --grey-25:   #F7F9FC;
  --grey-50:   #F4F4F4;   /* = Light Grey */
  --grey-100:  #E8EDF3;
  --grey-200:  #D5DEE8;
  --grey-300:  #B6C4D2;
  --grey-400:  #8FA6BD;
  --grey-500:  #5A7184;
  --grey-600:  #435568;
  --grey-700:  #33475B;
  --grey-800:  #243B53;
  --grey-900:  #16283C;

  /* Semantic hues — absent from the CIS, required by the product UI */
  --green-600: #0B7A55;  --green-400: #35D6A0;  --green-50: #E8F6F0;
  --amber-600: #8A5A0B;  --amber-400: #FFC15E;  --amber-50: #FDF3E2;
  --red-600:   #B32D1F;  --red-400:   #FF8A75;  --red-50:   #FCEDEA;

  /* ---------- Layer 3 · Roles (light theme) ---------- */

  /* Surfaces */
  --color-bg:              var(--grey-0);
  --color-bg-subtle:       var(--grey-25);
  --color-bg-inset:        var(--grey-50);
  --color-surface:         var(--grey-0);
  --color-surface-raised:  var(--grey-0);
  --color-surface-brand:   var(--navy-800);   /* dark sections */

  /* Text — all ≥ 4.5:1 on --color-bg and --color-bg-subtle */
  --color-text:            var(--grey-800);   /* 11.50:1 */
  --color-text-strong:     var(--navy-800);   /* 13.53:1 — headings */
  --color-text-muted:      var(--grey-500);   /*  5.08:1 */
  --color-text-inverse:    var(--grey-0);
  --color-text-link:       var(--navy-600);   /*  8.61:1 */

  /* Borders */
  --color-border:          var(--grey-100);
  --color-border-strong:   var(--grey-200);
  --color-border-brand:    var(--navy-600);

  /* Primary action */
  --color-primary:         var(--navy-600);
  --color-primary-hover:   var(--navy-700);
  --color-primary-active:  var(--navy-800);
  --color-primary-text:    var(--grey-0);     /* 8.61:1 */
  --color-primary-subtle:  var(--navy-50);

  /* Accent — the COO's colour. Presence, activity, "it's working". */
  --color-accent:          var(--turq-700);   /* text & icons · 5.23:1 */
  --color-accent-fill:     var(--turq-400);   /* backgrounds & graphics */
  --color-accent-on-fill:  var(--navy-800);   /* 6.93:1 on turquoise */
  --color-accent-subtle:   var(--turq-50);

  /* Feedback */
  --color-success:         var(--green-600);
  --color-success-subtle:  var(--green-50);
  --color-warning:         var(--amber-600);
  --color-warning-subtle:  var(--amber-50);
  --color-danger:          var(--red-600);
  --color-danger-subtle:   var(--red-50);

  --color-focus:           var(--turq-600);

  /* ---------- Typography ---------- */
  --font-display: 'Navara Geometric', 'Outfit', 'Poppins', system-ui, sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;
  --fw-bold: 700;     --fw-extrabold: 800;

  /* Fluid scale · min at 360px viewport, max at 1280px */
  --text-display-xl: clamp(2.75rem, 1.6rem + 5.1vw, 4rem);    /* 44 → 64 */
  --text-display-l:  clamp(2.25rem, 1.4rem + 3.8vw, 3.25rem); /* 36 → 52 */
  --text-display-m:  clamp(1.875rem, 1.3rem + 2.6vw, 2.625rem);
  --text-h1:         clamp(1.75rem, 1.3rem + 2.0vw, 2.25rem);
  --text-h2:         clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);
  --text-h3:         1.5rem;
  --text-h4:         1.25rem;
  --text-body-lg:    1.125rem;
  --text-body:       1rem;
  --text-body-sm:    0.875rem;
  --text-caption:    0.8125rem;
  --text-overline:   0.75rem;

  --lh-tight: 1.08;  --lh-snug: 1.25;  --lh-normal: 1.55;  --lh-loose: 1.7;
  --ls-display: -0.02em;  --ls-normal: 0;  --ls-overline: 0.16em;

  /* ---------- Space · 4px base, 8pt rhythm ---------- */
  --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-20: 80px;  --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  --section-y:       clamp(4rem, 2rem + 8vw, 7.5rem);
  --container:       1200px;
  --container-text:  720px;
  --gutter:          clamp(1.25rem, 0.5rem + 3vw, 2rem);

  /* ---------- Radius ---------- */
  --radius-sm: 6px;   --radius-md: 10px;  --radius-lg: 16px;
  --radius-xl: 24px;  --radius-2xl: 32px; --radius-full: 999px;

  /* ---------- Elevation · navy-tinted, never neutral black ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 45, 98, .06);
  --shadow-sm: 0 2px 8px rgba(0, 45, 98, .08);
  --shadow-md: 0 8px 24px rgba(0, 45, 98, .10);
  --shadow-lg: 0 20px 48px rgba(0, 45, 98, .14);
  --shadow-xl: 0 32px 72px rgba(0, 45, 98, .18);
  --shadow-accent: 0 12px 32px rgba(0, 206, 209, .28);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 150ms;  --dur-base: 250ms;  --dur-slow: 400ms;  --dur-story: 700ms;

  --z-base: 1;  --z-sticky: 40;  --z-nav: 90;  --z-modal: 200;  --z-toast: 300;
}

/* ============================================================
   Dark theme — the brand's native register.
   Applies to dark sections in light mode too: add .rl-dark.
   ============================================================ */
:root[data-theme="dark"],
.rl-dark {
  --color-bg:              var(--navy-900);
  --color-bg-subtle:       var(--navy-800);
  --color-bg-inset:        #001A36;
  --color-surface:         #002F66;
  --color-surface-raised:  #003A7A;
  --color-surface-brand:   var(--navy-900);

  --color-text:            #C9D9E8;   /* 9.39:1 on Deep Navy */
  --color-text-strong:     var(--grey-0);
  --color-text-muted:      var(--grey-400);  /* 5.39:1 */
  --color-text-inverse:    var(--navy-900);
  --color-text-link:       var(--turq-300);

  --color-border:          rgba(255, 255, 255, .12);
  --color-border-strong:   rgba(255, 255, 255, .22);
  --color-border-brand:    var(--turq-400);

  --color-primary:         var(--turq-400);
  --color-primary-hover:   var(--turq-300);
  --color-primary-active:  var(--turq-500);
  --color-primary-text:    var(--navy-800);   /* 6.93:1 */
  --color-primary-subtle:  rgba(0, 206, 209, .14);

  --color-accent:          var(--turq-400);   /* 6.93:1 — safe here */
  --color-accent-fill:     var(--turq-400);
  --color-accent-on-fill:  var(--navy-800);
  --color-accent-subtle:   rgba(0, 206, 209, .12);

  --color-success:         var(--green-400);
  --color-success-subtle:  rgba(53, 214, 160, .14);
  --color-warning:         var(--amber-400);
  --color-warning-subtle:  rgba(255, 193, 94, .14);
  --color-danger:          var(--red-400);
  --color-danger-subtle:   rgba(255, 138, 117, .14);

  --color-focus:           var(--turq-300);

  --shadow-xs: 0 1px 2px rgba(0, 12, 26, .40);
  --shadow-sm: 0 2px 8px rgba(0, 12, 26, .45);
  --shadow-md: 0 8px 24px rgba(0, 12, 26, .50);
  --shadow-lg: 0 20px 48px rgba(0, 12, 26, .55);
  --shadow-xl: 0 32px 72px rgba(0, 12, 26, .60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* mirror the .rl-dark block — see README §Theming */
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .rl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-text-strong);
}

.rl-overline {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-accent);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}