/* ==========================================================================
   theme.css — SMM Panel design tokens
   Three themes, one token set. Load AFTER /app-assets/ stylesheets.
   Theme is applied via <html data-theme="light|dark|hc">.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-num: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono",
    Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;  /* 13px — legal/meta only, never body copy */
  --fs-sm: 0.9375rem;  /* 15px — table meta, helper text */
  --fs-base: 1.0625rem;/* 17px — body */
  --fs-md: 1.1875rem;  /* 19px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.625rem;   /* 26px */
  --fs-2xl: 2rem;      /* 32px */
  --fs-3xl: 2.5rem;    /* 40px */

  --lh-tight: 1.25;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  --fw-normal: 400;
  --fw-med: 550;
  --fw-bold: 700;

  /* ---- Space: 8px grid ------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px;
  --s-9: 64px; --s-10: 80px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ---- Controls -------------------------------------------------------- */
  --tap: 48px;          /* preferred touch target */
  --tap-min: 44px;      /* absolute floor */
  --ring-w: 3px;
  --ring-offset: 2px;
  --border-w: 1px;

  /* ---- Motion (all ≤150ms) -------------------------------------------- */
  --dur: 140ms;
  --dur-fast: 90ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-w: 268px;
  --topbar-h: 68px;
  --content-max: 1240px;
}

/* ==========================================================================
   LIGHT — soft off-white surfaces, near-black ink. No #000 on #FFF.
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:            #F1F4F7; /* app canvas */
  --surface:       #FBFCFD; /* cards */
  --surface-2:     #F5F7FA; /* table stripes, inset wells */
  --surface-3:     #EAEEF3; /* hover */
  --ink:           #12171C; /* 16.33:1 on bg · 17.55:1 on surface */
  --ink-muted:     #49545F; /*  7.00:1 on bg ·  7.53:1 on surface (AAA body) */
  --ink-subtle:    #5C6874; /*  5.16:1 on bg — meta text only, never body */
  --ink-inverse:   #FFFFFF;

  --border:        #C8D0D8;
  --border-strong: #A6B2BE;

  --accent:        #145FA6; /* white on accent 6.53:1 */
  --accent-hover:  #10508D;
  --accent-active: #0C4276;
  --accent-ink:    #FFFFFF;
  --accent-text:   #0F5391; /* 7.13:1 on bg — links, accent labels */
  --accent-soft:   #E1EBF7;
  --accent-border: #9CC1E4;

  --focus:         #B8330A; /* orange-red ring: distinct from every status */
  --focus-inverse: #FFD9A0;

  --pend-bg: #FBEFD2; --pend-ink: #7A4E00; --pend-bd: #E0BE73; /* 6.30:1 */
  --prog-bg: #DEEAF7; --prog-ink: #124F8C; --prog-bd: #94BCE4; /* 6.82:1 */
  --done-bg: #D8EFE8; --done-ink: #0F5D4E; --done-bd: #7FC4B1; /* 6.47:1 */
  --canc-bg: #FAE3DF; --canc-ink: #98271C; --canc-bd: #E1A29A; /* 6.48:1 */
  --unk-bg:  #E5E9ED; --unk-ink:  #414C57; --unk-bd:  #B3BDC7; /* 7.18:1 */

  --shadow-1: 0 1px 2px rgba(18, 23, 28, 0.06), 0 1px 1px rgba(18, 23, 28, 0.04);
  --shadow-2: 0 2px 6px rgba(18, 23, 28, 0.08), 0 1px 2px rgba(18, 23, 28, 0.05);
  --shadow-3: 0 12px 32px rgba(18, 23, 28, 0.14), 0 2px 8px rgba(18, 23, 28, 0.08);
  --scrim: rgba(18, 23, 28, 0.48);

  --sb-thumb: #B3BEC9;
  --sb-thumb-hover: #8D9BA9;
}

/* ==========================================================================
   DARK — desaturated slate, never pure black. Ink is off-white.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #141A20;
  --surface:       #1C2430;
  --surface-2:     #222B38;
  --surface-3:     #2A3441;
  --ink:           #E8EDF2; /* 14.88:1 on bg · 13.26:1 on surface */
  --ink-muted:     #A3B0BD; /*  7.93:1 on bg ·  7.07:1 on surface */
  --ink-subtle:    #8B98A6;
  --ink-inverse:   #0B1116;

  --border:        #35404E;
  --border-strong: #4A5765;

  --accent:        #7FB6E8; /* near-black on accent 8.82:1 */
  --accent-hover:  #9AC6EE;
  --accent-active: #B2D4F3;
  --accent-ink:    #0B1116;
  --accent-text:   #8CC0EE; /* 8.10:1 on surface */
  --accent-soft:   #1B2E42;
  --accent-border: #3C5F84;

  --focus:         #FFB35C;
  --focus-inverse: #3A2000;

  --pend-bg: #3A2E12; --pend-ink: #F3D08A; --pend-bd: #7A6127; /* 8.99:1 */
  --prog-bg: #152B3F; --prog-ink: #9CC8EF; --prog-bd: #34597D; /* 8.23:1 */
  --done-bg: #123128; --done-ink: #8CD9C4; --done-bd: #2C6455; /* 8.58:1 */
  --canc-bg: #3A1D18; --canc-ink: #F0A79C; --canc-bd: #7B4239; /* 7.83:1 */
  --unk-bg:  #262F3A; --unk-ink:  #B4C0CC; --unk-bd:  #4B5867; /* 7.32:1 */

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 14px 36px rgba(0, 0, 0, 0.68);
  --scrim: rgba(6, 9, 12, 0.68);

  --sb-thumb: #46525F;
  --sb-thumb-hover: #63717F;
}