/* ============================================================================
   FirmClock — Design Tokens
   The single source of truth for the visual system.
   Reskinning to match the acquired product interface should begin here.
   ========================================================================= */

:root {
  /* --- Ink: deep midnight-green, the structural dark ---------------------- */
  --ink-950: #060B0D;
  --ink-900: #0B1315;
  --ink-850: #101A1D;
  --ink-800: #152125;
  --ink-700: #1D2C31;
  --ink-600: #29393F;
  --ink-500: #435459;
  --ink-400: #667A80;
  --ink-300: #93A3A8;
  --ink-200: #BCC7CA;

  /* --- Paper: warm mineral-white surfaces --------------------------------- */
  --paper-000: #FFFFFF;
  --paper-050: #FBFAF6;
  --paper-100: #F5F3EE;
  --paper-150: #EFECE5;
  --paper-200: #E7E3DA;
  --paper-300: #D9D4C8;
  --paper-400: #BFB9AA;

  /* --- Signature accent: deep evergreen-teal ------------------------------ */
  --accent-800: #063A36;
  --accent-700: #084B45;
  --accent-600: #0A5C55;
  --accent-500: #0E7268;
  --accent-400: #2C8E83;
  --accent-300: #74B6AD;
  --accent-200: #B4D8D2;
  --accent-100: #D9EBE8;
  --accent-050: #EEF6F4;

  /* --- Brass: reserved strictly for data emphasis ------------------------- */
  --brass-600: #8E6A2E;
  --brass-500: #A9803F;
  --brass-300: #D7BD8B;
  --brass-100: #F0E5D0;

  /* --- Functional: status only, never decoration -------------------------- */
  --flag-600: #93441A;
  --flag-500: #B4551F;
  --flag-300: #E0A97F;
  --flag-100: #F7E9DE;

  /* --- Semantic surface roles (light) ------------------------------------- */
  --bg-page: var(--paper-050);
  --bg-raised: var(--paper-000);
  --bg-sunken: var(--paper-100);
  --bg-inverse: var(--ink-900);

  --fg-primary: var(--ink-900);
  --fg-secondary: var(--ink-500);
  --fg-muted: #5A6D73;
  --fg-inverse: var(--paper-050);
  --fg-inverse-muted: #9EB0B3;
  --fg-accent: var(--accent-600);

  /* Product-interface text tiers. These flip with surface context so that
     small labels inside the conceptual UI always clear 4.5:1. Do not use the
     raw --ink-300/--ink-400 ramp for text; those are for hairlines and marks. */
  --ui-muted: #55686E;
  --ui-faint: #5F7278;

  --line-hairline: rgba(11, 19, 21, 0.09);
  --line-soft: rgba(11, 19, 21, 0.14);
  --line-strong: rgba(11, 19, 21, 0.24);
  --line-inverse-hairline: rgba(255, 255, 255, 0.10);
  --line-inverse-soft: rgba(255, 255, 255, 0.17);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype",
    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-metric: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono",
    "Consolas", "Liberation Mono", monospace;

  /* Fluid editorial scale. Ratios are deliberate, not default. */
  --fs-display-1: clamp(2.6rem, 1.42rem + 4.7vw, 5.125rem);
  --fs-display-2: clamp(2.05rem, 1.42rem + 2.5vw, 3.375rem);
  --fs-display-3: clamp(1.55rem, 1.29rem + 1.05vw, 2.125rem);
  --fs-lead: clamp(1.0625rem, 1.0rem + 0.30vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-display: 1.04;
  --lh-heading: 1.14;
  --lh-lead: 1.5;
  --lh-body: 1.62;

  --tracking-display: -0.021em;
  --tracking-tight: -0.013em;
  --tracking-normal: -0.005em;
  --tracking-label: 0.14em;
  --tracking-label-wide: 0.2em;

  /* --- Spacing: 4px base -------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --section-y: clamp(4.5rem, 3rem + 6.2vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  --measure: 68ch;
  --content-max: 1200px;
  --wide-max: 1360px;

  /* --- Radii: restrained, near-architectural ------------------------------ */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* --- Elevation: quiet, paper-like --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 19, 21, 0.05);
  --shadow-md: 0 2px 4px rgba(11, 19, 21, 0.04), 0 8px 20px rgba(11, 19, 21, 0.05);
  --shadow-lg: 0 1px 2px rgba(11, 19, 21, 0.05), 0 12px 32px rgba(11, 19, 21, 0.07),
    0 40px 80px -32px rgba(11, 19, 21, 0.16);
  --shadow-inverse: 0 24px 64px -24px rgba(0, 0, 0, 0.6);

  /* --- Motion: restrained ------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-in-out: cubic-bezier(0.62, 0.02, 0.24, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
  --dur-reveal: 760ms;

  /* --- The Interval Rule: the signature motif ----------------------------- */
  /* A calibrated measure. Minor tick = a quarter hour. Major tick = an hour. */
  --tick-gap: 9px;          /* distance between minor ticks */
  --tick-major-every: 4;    /* four quarter-hours to the hour */
  --tick-minor-h: 5px;
  --tick-major-h: 10px;
  --tick-w: 1px;
  --tick-color: var(--line-soft);
  --tick-major-color: var(--line-strong);
  --tick-color-inverse: rgba(255, 255, 255, 0.16);
  --tick-major-color-inverse: rgba(255, 255, 255, 0.32);

  /* Band states — each differs in FORM as well as colour. */
  --band-h: 10px;
  --band-recorded-fill: transparent;
  --band-recorded-line: var(--ink-400);
  --band-submitted-fill: var(--ink-600);
  --band-approved-fill: var(--accent-500);
  --band-missing-line: var(--flag-500);

  --focus-ring: var(--accent-500);
  --focus-ring-inverse: var(--accent-300);
}

/* Inverse context: any dark panel opts in by setting these roles. */
.on-ink {
  --bg-page: var(--ink-900);
  --bg-raised: var(--ink-850);
  --bg-sunken: var(--ink-950);
  --fg-primary: var(--paper-050);
  --fg-secondary: #A9BABD;
  --fg-muted: #7C8F93;
  --fg-accent: var(--accent-300);
  --line-hairline: var(--line-inverse-hairline);
  --line-soft: var(--line-inverse-soft);
  --line-strong: rgba(255, 255, 255, 0.28);
  --tick-color: var(--tick-color-inverse);
  --tick-major-color: var(--tick-major-color-inverse);
  --band-recorded-line: #7C8F93;
  --band-submitted-fill: #A9BABD;
  --band-approved-fill: var(--accent-400);
  --focus-ring: var(--focus-ring-inverse);
  --ui-muted: #9DAFB3;
  --ui-faint: #93A3A8;
  color-scheme: dark;
}

/* A light panel sitting inside a dark section must restore the light role set,
   or it inherits inverse text colours onto a white surface. */
.on-paper {
  --bg-page: var(--paper-050);
  --bg-raised: var(--paper-000);
  --bg-sunken: var(--paper-100);
  --fg-primary: var(--ink-900);
  --fg-secondary: var(--ink-500);
  --fg-muted: #5A6D73;
  --fg-accent: var(--accent-600);
  --line-hairline: rgba(11, 19, 21, 0.09);
  --line-soft: rgba(11, 19, 21, 0.14);
  --line-strong: rgba(11, 19, 21, 0.24);
  --tick-color: rgba(11, 19, 21, 0.14);
  --tick-major-color: rgba(11, 19, 21, 0.24);
  --band-recorded-line: var(--ink-400);
  --band-submitted-fill: var(--ink-600);
  --band-approved-fill: var(--accent-500);
  --focus-ring: var(--accent-500);
  --ui-muted: #55686E;
  --ui-faint: #5F7278;
  color-scheme: light;
  color: var(--fg-primary);
}