/* =====================================================================
   Saifah Design System — Colors & Type
   Sourced from main/tailwind.config.js + main/src/index.css
   Saifah is an EV travel-planning app for Thailand. Brand palette is
   a calm sky blue with warm amber accents; type is Noto Sans Thai for
   bilingual (Thai + English) UI.

   VENDORED from the Claude Design project "Saifah Design System"
   (019e0839-cce0-7577-b7d2-f6c78d54a362), pulled with DesignSync.
   Canonical source of truth for every colour, size and radius used by the
   promo video. Remotion needs hardcoded inline style literals for Studio
   keyframe editing, so scenes inline these values with the token name in a
   comment rather than reading var() at runtime. Change a value here, then
   grep the token name across src/saifah/ to update the scenes.
   ===================================================================== */

/* Noto Sans Thai is loaded from Google Fonts by each page.
   To self-host, drop fonts/NotoSansThai.woff2 and add an @font-face here. */
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap"); /* brand wordmark */

/* ===================================================================== */
/* COLOR TOKENS                                                          */
/* ===================================================================== */
:root {
  /* --- Brand: Sky --- */
  /* "sky-100" is paradoxically the lighter brand cyan — Saifah's primary
     interactive color (buttons, accents, links). Naming inherited from
     the Tailwind override in tailwind.config.js. */
  --sky-100: #539EDA;   /* primary action, links, focus            */
  --sky-500: #2D69B2;   /* deeper blue — banner backgrounds, hero  */
  --sky-900: #1C3158;   /* navy — headings, sidebar, deep surfaces */

  /* --- Brand: Yellow / Amber --- */
  --yellow-100: #FFC973; /* highlight, charge-bolt fill           */
  --yellow-500: #E9A240; /* logo bolt, warm CTA accent            */

  /* --- Neutrals --- */
  --gray-100: #EFF0F6;   /* surface tint, page bg                 */
  --gray-500: #99ACC1;   /* secondary text, muted icons           */
  --gray-900: #2E2C33;   /* primary body text                     */
  --white:    #FFFFFF;
  --black:    #000000;

  /* --- Semantic system colors (charging-status / EV domain) --- */
  --status-available: #10B981;  /* emerald-500 — open / connected */
  --status-charging:  #2D69B2;  /* sky-500 — actively charging    */
  --status-occupied:  #E9A240;  /* yellow-500 — in use            */
  --status-offline:   #99ACC1;  /* gray-500 — unknown / closed    */
  --status-error:     #DC2626;  /* red-600 — fault                */

  /* Battery / power level scale */
  --battery-low:  #DC2626;
  --battery-mid:  #E9A240;
  --battery-high: #10B981;

  /* --- Semantic role tokens --- */
  --bg:           var(--white);
  --bg-subtle:    var(--gray-100);
  --bg-banner:    var(--sky-500);
  --bg-deep:      var(--sky-900);

  --fg:           var(--gray-900);
  --fg-muted:     var(--gray-500);
  --fg-on-blue:   var(--white);
  --fg-link:      var(--sky-100);

  --border:       #E5E7EB;
  --border-strong:var(--gray-500);

  --accent:       var(--sky-100);
  --accent-warm:  var(--yellow-500);

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(28, 49, 88, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 49, 88, 0.08);
  --shadow-lg: 0 10px 24px rgba(28, 49, 88, 0.12);
  --shadow-card: 0 6px 18px rgba(28, 49, 88, 0.10); /* matches drop-shadow-lg on map cards */

  /* --- Radius --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* default — Tailwind rounded-lg used everywhere */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* --- Spacing scale (4px base) --- */
  --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;

  /* --- Type --- */
  --font-sans: "Noto Sans Thai", "Noto Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noto Sans Thai", "Noto Sans", sans-serif;
  --font-brand: "Comfortaa", "Noto Sans Thai", sans-serif; /* wordmark / logotype only */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace;

  /* Sizes (px) — app uses 14–16px body, 10px label, 24–32px display */
  --fs-xxs: 10px;   /* tab labels, micro */
  --fs-xs:  12px;   /* helper text, captions */
  --fs-sm:  14px;   /* secondary body */
  --fs-md:  16px;   /* primary body */
  --fs-lg:  18px;   /* card titles */
  --fs-xl:  20px;   /* h3 */
  --fs-2xl: 24px;   /* h2 */
  --fs-3xl: 32px;   /* h1 / hero */
  --fs-4xl: 40px;   /* display */

  --lh-tight: 1.2; /* @kind other */
  --lh-snug:  1.35; /* @kind other */
  --lh-base:  1.5; /* @kind other */
  --lh-loose: 1.7; /* @kind other */

  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
}

/* ===================================================================== */
/* SEMANTIC TYPE STYLES                                                  */
/* ===================================================================== */

html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }

.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--sky-900);
  letter-spacing: -0.01em;
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--sky-900);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--sky-900);
}
.h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--sky-900);
}

.text-body, p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg);
}
.text-secondary {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}
.text-caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}
.text-label {                       /* tab labels, microcopy */
  font-size: var(--fs-xxs);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

.text-link, a {
  color: var(--fg-link);
  text-decoration: none;
}
.text-link:hover, a:hover { text-decoration: underline; }

.text-mono, code, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Stat / metric display — used for distance, kWh, battery % readouts */
.text-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--sky-100);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.text-stat-label {
  font-size: var(--fs-xxs);
  color: var(--fg-muted);
  text-align: center;
}