/* Cinetrax design tokens — light (default) and dark.
   Theme switching: light by default, dark via the OS (prefers-color-scheme),
   and an explicit override with <html data-theme="light|dark">. */


:root {
  /* ── Brand constants (identical in both modes; never use for UI roles directly) ── */
  --brand-stone: #E7E3D9;
  --brand-forest: #1C2A22;
  --brand-olive: #6E7B22;
  --brand-olive-light: #C2D15A;

  /* ── Type ── */
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-xs: 0.75rem;    /* 12 / 16 — meta, table captions */
  --text-sm: 0.875rem;   /* 14 / 20 — dense UI, table cells */
  --text-base: 1rem;     /* 16 / 24 — body */
  --text-lg: 1.125rem;   /* 18 / 28 — lead text */
  --text-xl: 1.375rem;   /* 22 / 28 — section titles */
  --text-2xl: 1.75rem;   /* 28 / 34 — page titles */
  --text-3xl: 2.5rem;    /* 40 / 44 — marketing h2 */
  --text-4xl: clamp(2.75rem, 6vw, 4.5rem); /* marketing h1 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-body: 0;

  /* ── Space (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; --space-16: 64px; --space-24: 96px; --space-32: 128px;

  /* ── Radius ── */
  --radius-sm: 6px;    /* inputs, chips */
  --radius-md: 10px;   /* buttons, cards */
  --radius-lg: 16px;   /* panels, dialogs */
  --radius-icon: 22.5%; /* app icon squircle */
  --radius-full: 999px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ── Layout ── */
  --content-max: 1200px;
  --sidebar-width: 248px;
  --control-height: 40px;
  --control-height-sm: 32px;
}

/* ── Light mode (default) ── */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F4F2EC;            /* page */
  --surface: #FFFFFF;       /* cards, tables, inputs */
  --surface-2: #ECE9E1;     /* sunken areas, table header, hover rows */
  --surface-brand: #E7E3D9; /* stone panels, marketing bands */
  --surface-inverse: #1C2A22;

  --text: #1C2A22;
  --text-muted: #4A564E;
  --text-subtle: #5E675F;   /* placeholders, meta; ≥4.5:1 on bg and surface-2 */
  --text-inverse: #F4F2EC;

  --border: #D6D1C4;        /* dividers on tables/forms only */
  --border-strong: #8E968F; /* input outlines (≥3:1) */
  --focus-ring: #6E7B22;

  --primary: #1C2A22;       /* main buttons: forest */
  --primary-hover: #2A3D31;
  --on-primary: #F4F2EC;

  --accent: #6E7B22;        /* the x, highlights, selected states */
  --accent-text: #5A6619;   /* links and accent text (≥5.6:1) */
  --accent-hover: #5A6619;
  --accent-soft: #E8ECCB;   /* selected row, active nav, badges */
  --on-accent: #FFFFFF;
  --on-accent-soft: #4A5414;

  --success: #2E7240;  --success-soft: #DCEEDF;
  --warning: #85570A;  --warning-soft: #F6E7C8;
  --danger:  #B3261E;  --danger-soft:  #F7DCD9;
  --info:    #2F55D4;  --info-soft:    #DFE6FB;

  --shadow-overlay: 0 12px 32px rgba(28, 42, 34, 0.16), 0 2px 6px rgba(28, 42, 34, 0.08);
  --scrim: rgba(17, 26, 21, 0.48);
}

/* ── Dark mode ── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111111;
  --surface: #1A1A1A;
  --surface-2: #242424;
  --surface-brand: #1A1A1A;
  --surface-inverse: #ECEAE4;

  --text: #ECEAE4;
  --text-muted: #A8A8A3;
  --text-subtle: #8E8E89;
  --text-inverse: #141414;

  --border: #2E2E2E;
  --border-strong: #6B6B67;
  --focus-ring: #ECEAE4;

  --primary: #ECEAE4;       /* main buttons: off-white */
  --primary-hover: #FFFFFF;
  --on-primary: #141414;

  --accent: #ECEAE4;
  --accent-text: #ECEAE4;
  --accent-hover: #FFFFFF;
  --accent-soft: #333333;
  --on-accent: #141414;
  --on-accent-soft: #FFFFFF;

  --success: #72CF8F;  --success-soft: #1C2A20;
  --warning: #E8B64A;  --warning-soft: #30281A;
  --danger:  #F2877E;  --danger-soft:  #331E1C;
  --info:    #8FA9FF;  --info-soft:    #1E2336;

  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --scrim: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #111111;
    --surface: #1A1A1A;
    --surface-2: #242424;
    --surface-brand: #1A1A1A;
    --surface-inverse: #ECEAE4;

    --text: #ECEAE4;
    --text-muted: #A8A8A3;
    --text-subtle: #8E8E89;
    --text-inverse: #141414;

    --border: #2E2E2E;
    --border-strong: #6B6B67;
    --focus-ring: #ECEAE4;

    --primary: #ECEAE4;
    --primary-hover: #FFFFFF;
    --on-primary: #141414;

    --accent: #ECEAE4;
    --accent-text: #ECEAE4;
    --accent-hover: #FFFFFF;
    --accent-soft: #333333;
    --on-accent: #141414;
    --on-accent-soft: #FFFFFF;

    --success: #72CF8F;  --success-soft: #1C2A20;
    --warning: #E8B64A;  --warning-soft: #30281A;
    --danger:  #F2877E;  --danger-soft:  #331E1C;
    --info:    #8FA9FF;  --info-soft:    #1E2336;

    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

/* ── Base ── */
html { font-family: var(--font-sans); background: var(--bg); color: var(--text); }
body { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.num, td.num, [data-numeric] { font-variant-numeric: tabular-nums; }
a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }