/* Design tokens — the single CSS source for the Itinera timeline.
   Holds only the neutrals/brand/signal palette, radii, shadows, sizes and px/day.
   Plugin identity colours are data-driven (from /api/plugins) and applied inline
   per row/bar — they are deliberately NOT vars here (docs/timeline-handoff/phase-1).

   Redesign (technical / grey-led): the surface is a layered cool-grey stack —
   a recessed canvas behind raised white panels, with the rail and per-plugin zone
   bands stepped in grey so each plugin reads as its own module. Radii are tightened
   and drop-shadows traded for crisp hairlines; the teal highlight is demoted to a
   restrained accent (active/selected indicators only). Data (dates, week/day numbers)
   is set in a monospace face for the instrument-panel feel. */
:root {
    /* ── CD palette ────────────────────────────────────────────────
       Corporate-design manual: every neutral/grey tone is one of the two
       house greys at 20 / 40 / 60 / 80 / 100 % opacity; #00677F is the
       single highlight. Signal colours (destructive / Freigabe) stay. */
    --grey: #525556;             /* house grey — cool/dark */
    --grey-warm: #929189;        /* house grey — warm/light */
    --highlight: #00677F;        /* CD highlight */
    --white: #FFFFFF;            /* surfaces / backgrounds */
    --black: #16181D;            /* primary text / headers */

    /* Dark grey ladder (82, 85, 86) */
    --grey-20: rgba(82, 85, 86, 0.2);
    --grey-40: rgba(82, 85, 86, 0.4);
    --grey-60: rgba(82, 85, 86, 0.6);
    --grey-80: rgba(82, 85, 86, 0.8);
    --grey-100: rgba(82, 85, 86, 1.0);

    /* Warm grey ladder (146, 145, 137) */
    --grey-warm-20: rgba(146, 145, 137, 0.2);
    --grey-warm-40: rgba(146, 145, 137, 0.4);
    --grey-warm-60: rgba(146, 145, 137, 0.6);
    --grey-warm-80: rgba(146, 145, 137, 0.8);
    --grey-warm-100: rgba(146, 145, 137, 1.0);

    /* Cool-grey surface ladder — the technical neutral stack the chrome is built on.
       Distinct from the house-grey opacity ladders (which stay for text/hairlines);
       these are solid fills so panels can layer without translucency stacking. */
    --n-0: #FFFFFF;              /* raised panel / timeline canvas */
    --n-50: #F7F8F9;            /* rail surface */
    --n-100: #EFF1F3;           /* recessed app canvas (gutter behind panels) */
    --n-200: #E6E8EB;           /* zone band fill */
    --n-300: #D8DBDF;           /* zone band edge / strong hairline */
    --n-400: #C3C7CC;           /* strong border */
    --n-500: #9AA0A8;           /* faint icon / disabled */

    /* Highlight ladder (0, 103, 127) */
    --highlight-20: rgba(0, 103, 127, 0.2);
    --highlight-40: rgba(0, 103, 127, 0.4);
    --highlight-60: rgba(0, 103, 127, 0.6);
    --highlight-80: rgba(0, 103, 127, 0.8);
    --highlight-100: rgba(0, 103, 127, 1.0);
    --highlight-08: rgba(0, 103, 127, 0.08);

    /* Red ladder (168, 50, 42) — brick-red signal, the highlight's
       hue-complement kept muted to sit with the warm grey */
    --red: #A8322A;
    --red-20: rgba(168, 50, 42, 0.2);
    --red-40: rgba(168, 50, 42, 0.4);
    --red-60: rgba(168, 50, 42, 0.6);
    --red-80: rgba(168, 50, 42, 0.8);
    --red-100: rgba(168, 50, 42, 1.0);
    --red-deep: #6E2017;         /* darker brick — borders */

    /* ── Neutrals & UI ─────────────────────────────────────────────── */
    --ink: var(--black);         /* primary text / headers */
    --muted: var(--grey-80);     /* secondary text */
    --muted-2: var(--grey-60);   /* secondary text */
    --faint: var(--grey-warm-80);/* faint text */
    --faint-2: var(--grey-warm-60);

    --brand: var(--highlight-100);
    --brand-soft: var(--highlight-20);
    --brand-soft-2: var(--highlight-08);

    --destructive: var(--red-100);      /* destructive text */
    --destructive-border: var(--red-deep);

    /* Layered surfaces (recessed → raised). The canvas is the cool grey gutter; panels
       sit on top in white, the rail one step down in grey so structure ≠ timeline. */
    --canvas: var(--n-100);      /* app background */
    --surface: var(--n-0);       /* timeline / panels */
    --rail: var(--n-50);         /* rail / structure column */
    --rail-2: var(--n-0);
    --header-fill: var(--n-0);   /* header fill */
    --track: var(--n-200);       /* segmented-control track fill */

    /* Per-plugin zone band (the rail's plugin separators). */
    --zone-fill: var(--n-200);
    --zone-edge: var(--n-300);

    --border-strong: var(--n-400);
    --border: var(--n-300);
    --hair-1: var(--n-200);              /* rows / grid hairlines */
    --hair-2: var(--n-200);
    --hair-3: var(--n-200);
    --hair-4: var(--n-200);

    /* Read-only (Freigabe) badge */
    --ro-bg: #F6EAE9;        /* brick red @ ~10% */
    --ro-text: var(--red-100);
    --ro-border: var(--red-40);

    /* Kind-based element fills (issue #54): colour communicates element *kind*, not plugin
       identity. Intervals/summary bars use the warm house grey; milestones a greyish red.
       Plugin identity survives only as an accent (rail dot, zone stripe, selection ring). */
    --milestone-fill: #C7A9A7;   /* greyish red — milestone diamonds */

    --interval-fill: var(--n-200);

    /* Calendar overlays / arrows (consumed in Phase 3) */
    --holiday-band: #F4B66A;     /* @ opacity 0.32 */
    --weekend: var(--grey-warm-20);
    --arrow: var(--grey-60);

    /* Dependency kinds (Track C): informational / successor / critical + conflict accent */
    --dep-info: #9AA3B2;
    --dep-follow: #6E7891;
    --dep-critical: #E0392B;
    --dep-conflict: #E8A33D;

    /* Overdue: an unfinished element past its end date — a red accent on the bar/row */
    --overdue: var(--red-100);

    /* ── Scale (pixels per day) ───────────────────────────────────── */
    --pxday-tag: 11;
    --pxday-monat: 3.4;      /* default */
    --pxday-quartal: 1.7;

    /* ── Sizing ───────────────────────────────────────────────────── */
    --row-h: 40px;
    --topbar-h: 56px;
    --rail-w: 340px;
    --rail-header-h: 40px;
    --month-header-h: 40px;
    --legend-h: 34px;
    --store-w: 400px;
    --popover-w: 288px;

    /* Width of the plugin-colour accent stripe on a zone band (rail + timeline). */
    --zone-accent-w: 3px;

    /* ── Radii ─ technical: tight corners, near-square bars ─────────── */
    --r-input: 3px;
    --r-bar: 2px;
    --r-control: 3px;
    --r-chip: 3px;
    --r-track: 4px;
    --r-switch: 11px;
    --r-popover: 4px;

    /* ── Shadows ─ flatter: hairline borders carry elevation, shadows are restrained ── */
    --shadow-segment: 0 1px 1px rgba(20, 24, 30, 0.06);
    --shadow-bar: 0 1px 1px rgba(20, 24, 30, 0.10);
    --shadow-popover: 0 8px 28px rgba(20, 24, 30, 0.18);
    --shadow-store: -10px 0 32px rgba(20, 24, 30, 0.16);

    /* ── Typography ───────────────────────────────────────────────── */
    --font-ui: 'Archivo', system-ui, sans-serif;
    --font-display: 'Space Grotesk', var(--font-ui);
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}