/* Sarnflow Design Tokens — DRE-59
   Brand: ArcGeekTech. Fonts: Poppins (Latin) + Noto Sans Thai (Thai companion).
   NOTE: mockups load fonts from Google Fonts for preview; production self-hosts
   via next/font. The @theme-equivalent values below lift into apps/web/app/globals.css. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root{
  /* ---- brand palette (fixed, theme-independent) ---- */
  --brand-navy:#24344A; --brand-royal:#4956B5; --brand-indigo:#5D68D4;
  --brand-soft:#759EDD; --brand-sky:#73CDFD; --brand-mint:#8DDDDF; --brand-off:#F7FCFE;
  --brand-gradient:linear-gradient(135deg,#5D68D4,#73CDFD);

  /* ---- type ----
     Thai-first, audience age 25–60. Body = 18px (not the Latin 16px baseline):
     WCAG prefers ≥18px for the 45+ presbyopic half of the range, and Thai script
     (stacked tone marks/vowels, small Bo Baimai height) reads poorly below ~16px.
     Body line-height 1.7 gives the vertical room Thai diacritics need (≥1.5 WCAG). */
  --font-sans:'Poppins','Noto Sans Thai',system-ui,sans-serif;
  --fs-xs:13px; --fs-sm:15px; --fs-base:18px; --fs-lg:20px; --fs-xl:22px;
  --fs-2xl:26px; --fs-3xl:32px;
  --lh-body:1.7; --lh-head:1.3;

  /* ---- spacing (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;

  /* ---- radius ---- */
  --r-input:6px; --r-card:10px; --r-pill:999px;

  /* ---- z-index scale ---- */
  --z-base:1; --z-dropdown:10; --z-sticky:20; --z-drawer:30; --z-modal:50; --z-toast:60;

  /* ---- motion ---- */
  --t-fast:150ms; --t-mid:220ms;

  /* ---- breakpoints (reference — CSS vars can't be used in @media; keep these values canonical) ----
     --bp-sm: 640px   (stack 2-col forms / compact)
     --bp-md: 900px   (sidebar → drawer; primary mobile/desktop split)
     --bp-lg: 1200px  (wide desktop) */
}

/* ===== LIGHT (default) ===== */
:root, :root[data-theme="light"]{
  --bg:#F7FCFE; --surface:#FFFFFF; --surface-2:#EEF2F7;
  --sidebar:#24344A; --sidebar-fg:#C6D3E2; --sidebar-fg-active:#FFFFFF; --sidebar-active:#33405A;
  --fg:#24344A; --fg-muted:#5B6B80; --fg-subtle:#677789;
  --neutral:#64748B;
  --line:#E2E8F0; --line-strong:#CBD5E1;
  --primary:#4956B5; --primary-hover:#3E4AA0; --accent:#73CDFD;
  --ring:rgba(73,86,181,.45);
  --success:#1F9D6B; --success-bg:#E6F6EE; --success-fg:#1F7A52;
  --warning:#E0922F; --warning-bg:#FFF2DC; --warning-fg:#945C12;
  --danger:#D64545;  --danger-bg:#FDE8E8;  --danger-fg:#A52828;
  --info:#3A8DDE;    --info-bg:#E7ECFB;    --info-fg:#4956B5;
  --shadow-sm:0 1px 2px rgba(36,52,74,.06),0 1px 3px rgba(36,52,74,.08);
  --shadow-md:0 4px 12px rgba(36,52,74,.10);
  --overlay:rgba(36,52,74,.45);
}

/* ===== DARK ===== */
:root[data-theme="dark"]{
  --bg:#16202E; --surface:#1E2A3C; --surface-2:#24344A;
  --sidebar:#111927; --sidebar-fg:#9FB0C5; --sidebar-fg-active:#FFFFFF; --sidebar-active:#24344A;
  --fg:#EAF1F8; --fg-muted:#A7B6C9; --fg-subtle:#93A3B8;
  --neutral:#7C8DA3;
  --line:#2C3A4F; --line-strong:#3A4B63;
  --primary:#759EDD; --primary-hover:#8AB0E6; --accent:#73CDFD;
  --ring:rgba(115,205,253,.5);
  --success:#3FBF8A; --success-bg:#163528; --success-fg:#6FD9AE;
  --warning:#E6A85A; --warning-bg:#382A14; --warning-fg:#F0C088;
  --danger:#E06B6B;  --danger-bg:#3A1E1E;  --danger-fg:#F0A0A0;
  --info:#73CDFD;    --info-bg:#1B2C44;    --info-fg:#9FCFFA;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 18px rgba(0,0,0,.4);
  --overlay:rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16202E; --surface:#1E2A3C; --surface-2:#24344A;
    --sidebar:#111927; --sidebar-fg:#9FB0C5; --sidebar-fg-active:#FFFFFF; --sidebar-active:#24344A;
    --fg:#EAF1F8; --fg-muted:#A7B6C9; --fg-subtle:#93A3B8;
    --neutral:#7C8DA3;
    --line:#2C3A4F; --line-strong:#3A4B63;
    --primary:#759EDD; --primary-hover:#8AB0E6; --accent:#73CDFD;
    --ring:rgba(115,205,253,.5);
    --success:#3FBF8A; --success-bg:#163528; --success-fg:#6FD9AE;
    --warning:#E6A85A; --warning-bg:#382A14; --warning-fg:#F0C088;
    --danger:#E06B6B;  --danger-bg:#3A1E1E;  --danger-fg:#F0A0A0;
    --info:#73CDFD;    --info-bg:#1B2C44;    --info-fg:#9FCFFA;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 6px 18px rgba(0,0,0,.4);
    --overlay:rgba(0,0,0,.6);
  }
}