/* tokens.css — design tokens for the contractor app ("JobThread" is a placeholder name).
   Owner: Creative. Engineering consumes; do not hard-code a hex anywhere else.
   Theme switch: <html data-theme="light|dark|auto">.  Client page ships light by default (daylight, phone).
   Tenant brand: app/js/theme.js applyTheme(hex) sets --accent-l/-d, --accent-fill-l/-d, --on-accent-l/-d,
   --accent-tint-l/-d on <html>. Defaults below are the product (chalk-line blue) so the page works with no JS.
   KEEP the three grounds per theme in sync with GROUNDS in theme.js (contrast is computed against them). */

:root {
  /* ---------- type ---------- */
  --font-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* scale: major third (1.25) from 16px; display is fluid. line-heights paired. */
  --fs-xs: 0.75rem;     /* 12  labels, mono stage tags */
  --fs-sm: 0.875rem;    /* 14  meta, captions */
  --fs-base: 1rem;      /* 16  body (never smaller on inputs: stops iOS zoom) */
  --fs-md: 1.125rem;    /* 18  lead */
  --fs-lg: 1.25rem;     /* 20  card titles */
  --fs-xl: 1.5625rem;   /* 25  section headings */
  --fs-2xl: 1.9375rem;  /* 31  */
  --fs-3xl: 2.4375rem;  /* 39  */
  --fs-display: clamp(2.25rem, 1.2rem + 5.4vw, 4.5rem); /* client page hero */
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.06em;   /* mono / uppercase labels only */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --measure: 62ch;

  /* ---------- space: 4px rhythm ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --section-y: clamp(var(--space-12), 8vw, var(--space-24));
  --gutter: clamp(var(--space-4), 5vw, var(--space-8));

  /* ---------- layout ---------- */
  --w-invoice: 25rem;   /* 400, Stripe-style hosted invoice column */
  --w-client: 44rem;    /* 704, client page column */
  --w-app: 72rem;       /* 1152, contractor desktop */
  --tap: 2.75rem;       /* 44 min touch target */
  --nav-h: 3.5rem;      /* 56 top bar */
  --bottom-nav-h: 4rem; /* 64 + safe area */
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- shape ---------- */
  --radius-xs: 0.375rem;  /* 6  chips inner */
  --radius-sm: 0.5rem;    /* 8  inputs */
  --radius-md: 0.75rem;   /* 12 cards, photo tiles */
  --radius-lg: 1rem;      /* 16 feed cards, invoice */
  --radius-xl: 1.5rem;    /* 24 stacked sheets */
  --radius-pill: 999px;
  --border-w: 1px;
  --ring-w: 2px;
  --ring-offset: 2px;

  /* ---------- z ---------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-nav: 40;
  --z-sheet: 60;
  --z-toast: 80;
  --z-skip: 100;

  /* ---------- motion ---------- */
  --dur-instant: 90ms;   /* press, toggle */
  --dur-fast: 160ms;     /* hover, focus, chip change */
  --dur-base: 260ms;     /* reveal, sheet */
  --dur-slow: 420ms;     /* node fill, photo develop */
  --dur-scene: 700ms;    /* rail segment draw per stage */
  --dur-open: 1200ms;    /* the opening split-flap beat, once */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* arrive */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* travel */
  --ease-press: cubic-bezier(0.3, 0, 0.2, 1);        /* press down */
  --ease-settle: cubic-bezier(0.34, 1.3, 0.64, 1);   /* tiny overshoot, check marks only */
  --stagger: 60ms;

  /* ---------- semantic hues that do not change per tenant (AA on all three grounds of each theme) ---------- */
  color-scheme: light;

  /* light theme (default) */
  --bg: #f6f4f0;
  --surface: #ffffff;
  --surface-2: #ece8e1;       /* sunken: inputs, segmented track */
  --border: #e0dbd2;          /* decorative hairline */
  --border-strong: #8c857a;   /* UI boundary, >= 3:1 */
  --text: #15130f;            /* 17.4:1 on bg */
  --text-2: #4a453e;          /* 8.6:1 */
  --text-3: #655e56;          /* 5.2:1 on surface-2: the floor for any real text */
  --overlay: rgb(21 19 15 / 0.45);
  --logo-plate: #ffffff;      /* tenant logos always sit on this plate (an <img> cannot inherit currentColor), both themes */
  --on-logo-plate: #15130f;
  --grain-opacity: 0.05;
  --photo-grade: saturate(0.94) sepia(0.06) contrast(1.02); /* one warm grade for every photo */

  --success: #1c6b3a;
  --success-tint: #e1efe5;
  --warning: #8a5200;
  --warning-tint: #f6e9d2;
  --danger: #b3261e;
  --danger-tint: #f7e0de;
  --info: #2a56c6;
  --info-tint: #e3e9f7;

  --shadow-1: 0 1px 2px rgb(21 19 15 / 0.06), 0 0 0 1px rgb(21 19 15 / 0.04);
  --shadow-2: 0 1px 2px rgb(21 19 15 / 0.05), 0 8px 24px -6px rgb(21 19 15 / 0.12);
  --shadow-sheet: 0 -8px 32px -8px rgb(21 19 15 / 0.14);

  /* tenant accent: product defaults (overridden inline by theme.js). -l = light-theme value, -d = dark-theme value */
  --accent-brand: #2a56c6;
  /* values below are the output of deriveTheme('#2a56c6') (theme.js), verified by the self-test */
  --accent-l: #2954c2;
  --accent-fill-l: #2a56c6;
  --on-accent-l: #ffffff;
  --accent-tint-l: #dee1eb;
  --accent-d: #7090e1;
  --accent-fill-d: #2a57c8;
  --on-accent-d: #ffffff;
  --accent-tint-d: #0f1421;
}

/* light is the default; explicit */
:root,
:root[data-theme="light"] {
  --accent: var(--accent-l);
  --accent-fill: var(--accent-fill-l);
  --on-accent: var(--on-accent-l);
  --accent-tint: var(--accent-tint-l);
  --focus: var(--accent-l);
}

/* dark: explicit */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0a;
  --surface: #141413;
  --surface-2: #1d1c1a;
  --border: #2a2926;
  --border-strong: #6f6a62;
  --text: #f4f2ee;            /* 17.5:1 */
  --text-2: #b4aea4;          /* 9:1 */
  --text-3: #918b81;          /* 5.2:1 on surface-2 */
  --overlay: rgb(0 0 0 / 0.6);
  --grain-opacity: 0.07;
  --photo-grade: saturate(0.92) sepia(0.05) brightness(0.96);

  --success: #5fcf8a;
  --success-tint: #12261a;
  --warning: #e8a94a;
  --warning-tint: #2a1f0c;
  --danger: #ff8a80;
  --danger-tint: #301514;
  --info: #8fb0ff;
  --info-tint: #141c33;

  --shadow-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-2: 0 0 0 1px rgb(255 255 255 / 0.06), 0 12px 32px -8px rgb(0 0 0 / 0.7);
  --shadow-sheet: 0 -8px 32px -8px rgb(0 0 0 / 0.7);

  --accent: var(--accent-d);
  --accent-fill: var(--accent-fill-d);
  --on-accent: var(--on-accent-d);
  --accent-tint: var(--accent-tint-d);
  --focus: var(--accent-d);
}

/* auto: follows the OS. Same values as the explicit dark block (duplicated on purpose: CSS cannot share a block across a media query). */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0b0b0a;
    --surface: #141413;
    --surface-2: #1d1c1a;
    --border: #2a2926;
    --border-strong: #6f6a62;
    --text: #f4f2ee;
    --text-2: #b4aea4;
    --text-3: #918b81;
    --overlay: rgb(0 0 0 / 0.6);
    --grain-opacity: 0.07;
    --photo-grade: saturate(0.92) sepia(0.05) brightness(0.96);

    --success: #5fcf8a;
    --success-tint: #12261a;
    --warning: #e8a94a;
    --warning-tint: #2a1f0c;
    --danger: #ff8a80;
    --danger-tint: #301514;
    --info: #8fb0ff;
    --info-tint: #141c33;

    --shadow-1: 0 0 0 1px rgb(255 255 255 / 0.06);
    --shadow-2: 0 0 0 1px rgb(255 255 255 / 0.06), 0 12px 32px -8px rgb(0 0 0 / 0.7);
    --shadow-sheet: 0 -8px 32px -8px rgb(0 0 0 / 0.7);

    --accent: var(--accent-d);
    --accent-fill: var(--accent-fill-d);
    --on-accent: var(--on-accent-d);
    --accent-tint: var(--accent-tint-d);
    --focus: var(--accent-d);
  }
}
:root[data-theme="auto"] {
  --accent: var(--accent-l);
  --accent-fill: var(--accent-fill-l);
  --on-accent: var(--on-accent-l);
  --accent-tint: var(--accent-tint-l);
  --focus: var(--accent-l);
}

/* ---------- stage rail tokens (the signature) ---------- */
:root {
  --rail-line-w: 2px;
  --rail-node: 1.5rem;          /* 24 */
  --rail-node-current: 1.75rem; /* 28 */
  --rail-gutter: 2.75rem;       /* left column width on mobile, node centred in it */
  --rail-track: var(--border-strong);
  --rail-draw: var(--accent-fill);
}