/* ==========================================================================
   Anaïse design tokens — v0.2
   Memo §2–§5: white/off-white/grey palette, PO Manager light-mode blue
   accent, dark theme from day one. All colors and layout constants are
   named tokens; site.css consumes tokens only.
   Luminance model (DevOps / PO Manager lineage): nav chrome in quiet
   grey, the work surface (Engagement Window) in pure white — the eye
   reads grey as chrome, white as where work happens.
   Layout constants that appear in media queries cannot use custom
   properties — those breakpoints are documented here and repeated
   numerically in site.css with a comment referencing the token name.
   ========================================================================== */

:root {
    /* --- Surfaces (light) — the PO Manager triad (Franck 2026-07-20):
       darker grey chrome, off-white work surface, white cards/paper on
       top. Scale: desk < panel < nav < page < card. Values derived
       from Franck's PO Manager captures (app is SSO-gated). --- */
    --bg-page: #fafbfc;            /* Engagement Window: off-white */
    --bg-nav: #eceef1;             /* primary nav rail: darker grey chrome */
    --bg-panel-alt: #f2f3f6;       /* expanded nav: a shade LIGHTER than the
                                      rail (Franck 2026-07-20 — natural step
                                      toward the page; spec C.3 had it right) */
    --bg-card: #ffffff;            /* cards, pill, paper: white pops on off-white */
    --bg-bubble: #eceef1;          /* user message bubble on off-white */
    --bg-hover: #e3e6ea;
    --bg-active: #e8f0fe;
    /* Selection is GREY (Franck 2026-07-19): one grey band (+ fused
       wrapper) per selection; the ancestor gets an underscore, not a
       frame; hover unchanged. Deepened with the chrome (2026-07-20). */
    --bg-active-cat: #d9dce1;      /* selected root: grey band */
    --bg-active-sub: rgba(0, 120, 212, 0.10);  /* selected sub/tree row: light blue (Franck; POManager) */
    --parent-underscore: #aab0b9;  /* thick underscore on the ancestor row */

    /* --- Ink --- */
    --text-primary: #1e1e1e;
    --text-secondary: #5f6368;
    --text-muted: #9aa0a6;
    --text-placeholder: #b0b6bc;

    /* Nav & status ink (Franck 2026-07-20, PO Manager): separable from
       the prose scale so dark can lift rail items and status-bar items
       to white without touching anything else. Light: same grey as
       --text-secondary — no visual change. */
    --nav-ink: #5f6368;
    --status-ink: #5f6368;
    /* Highlighted rail item's own ink + the hover band (Franck
       2026-07-20, PO Manager): light keeps today's values exactly —
       dark goes pale blue / light blue. */
    --nav-ink-active: #1e1e1e;     /* = light --text-primary */
    --nav-ink-active-sub: #5f6368; /* selected sub/folder ink: grey, calm on the light-blue band */
    --nav-hover: #e0e3e7;          /* a step below the darker nav grey */
    /* Search-pill send: a subdued grey gradient, not the flashy accent (Franck) — it is a
       secondary affordance, quieter than the composer's send. */
    --search-send-bg: linear-gradient(135deg, #eceef1 0%, #d3d6db 100%);
    --search-send-ink: #6b7077;

    /* --- Accent (memo §3: PO Manager light-mode blue) --- */
    --accent: #0078d4;
    --connector: #0078d4;          /* the selected-folder → title leader line (light: accent blue) */
    --accent-deep: #106ebe;
    --accent-contrast: #ffffff;    /* text/icon on accent */
    --accent-soft: rgba(0, 120, 212, 0.08);
    --accent-border: rgba(0, 120, 212, 0.3);

    /* Nerval luminescent gradient (distilled from the Nerval "N": cyan →
       azure → deep blue). For primary action surfaces and icon accents;
       flat --accent remains for text links and focus states. */
    --accent-gradient: linear-gradient(135deg, #24b7e6 0%, #1a80d8 52%, #2b41d0 100%);
    --on-gradient: #ffffff;        /* icon/text atop the gradient, both themes */
    --accent-glow: 0 2px 10px rgba(26, 118, 210, 0.35);
    --accent-glow-strong: 0 3px 16px rgba(26, 118, 210, 0.5);
    /* The gradient's piecewise-linear AVERAGE as one flat hue (Franck
       2026-07-20) — for text that should speak the gradient's color
       without wearing the gradient (first use: the org name). */
    --gradient-mean: #217fda;

    /* --- Lines & depth (deepened with the chrome, 2026-07-20 —
       hairlines must read on the darker greys too) --- */
    --border: #d6d9de;
    --border-light: #e3e6ea;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.05), 0 3px 12px rgba(0, 0, 0, 0.07);

    /* --- Geometry --- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 24px;

    /* --- Layout constants (memo §5, §10, §16) --- */
    --rail-width: 172px;           /* labeled rail hugging content (Franck
                                      2026-07-18); may expand if the rail
                                      ever nests one level deeper */
    --subitem-indent: 12px;        /* ~⅛ inch — halved (Franck 2026-07-19):
                                      still a clear indent, less overshoot */
    --secondary-width: 226px;      /* Franck 2026-08-30: −⅓ from 340 (SPEC OVERRIDE — below C.3's 300–450;
                                      340 read too wide). Still far more legible than the old 165; long
                                      names ellipsize per Finder canon. In Document Mode both navs yield
                                      20% (--doc-nav-scale) so the preview gets the real estate. */
    --doc-nav-scale: 0.8;          /* rail + secondary each keep 80% of their width while a doc is open */
    --doc-min-width: 650px;        /* document minimum readable width */
    --doc-comfort-width: 850px;    /* document comfortable reading measure */
    --conv-min-width: 320px;       /* conversation column minimum */
    /* Breakpoints (used numerically in media queries):
       --floor: 1280px | secondary nav yields: 1440px | conversation yields: 1100px */

    /* --- Rail icon color: one deep electric blue (the deep end of the
       Nerval N), unified — separate colors didn't pop (Franck 2026-07-18) --- */
    --icon-rail: #2434d8;

    /* --- Document desk & paper (memo §20, PO Manager model): the
       document is a white sheet on a recessed darker desk. The paper
       tokens are defined ONCE and never overridden in dark — the paper
       stays white in both themes (fidelity to the real document). --- */
    --bg-desk: #e8eaee;            /* the PO grey behind the doc preview —
                                      lifted a tad (Franck 2026-07-20) so it
                                      no longer blends with the status greys */
    --bg-paper: #ffffff;
    --paper-ink: #1e1e1e;
    --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.14);
    --overlay-scrim: rgba(23, 26, 31, 0.55);   /* Full Preview backdrop */

    /* --- Powered-by bar: a step darker than the nav chrome --- */
    --powered-bg: #dfe2e6;
    --powered-ink: #5f6368;

    /* --- Vault origin badges --- */
    --badge-generated-bg: rgba(15, 157, 110, 0.12);
    --badge-generated-ink: #0d7d58;

    /* Ink drawn ON the accent fill (the filter tick). White in both themes: the accent is a
       mid-to-deep blue in each, so the tick reads the same way whichever desk you are at. */
    --on-accent: #ffffff;

    /* --- Role ink: quieter than the organization's own work, still legible ---
       The label carries the ONE sharp distinction — did this document get a vote at all. Reference
       material did (0.35), so it reads like core; only supporting material, which had no say, sits
       quieter. The finer core/reference difference is carried by the icon and the origin dot, which
       is honest: it was imperceptible as a third shade of grey, and a third shade could not have
       cleared the contrast floor anyway.
       Measured, not guessed: opacity dimming put this text at 2.55:1 against the panel, against the
       4.5:1 that 12.5px needs. This token measures 4.6:1. A document having no vote is no reason a
       person should struggle to read its name. */
    --ink-supporting: #6a6f74;

    /* --- Demo org identity (Capstone mark: navy / steel / sage / grey) --- */
    --cap-navy: #25406f;
    --cap-steel: #5b7db1;
    --cap-sage: #9cbfa9;
    --cap-tag: #8a9099;

    --brand-black: #000000;        /* the Anaïse mark's ground — both themes */

    /* --- Landing page (theme-FIXED — its own thing, memo §25) --- */
    --landing-black: #0b0b0d;
    --landing-ink: #f5f4f1;
    --landing-ink-dim: rgba(245, 244, 241, 0.62);
    --landing-right: #f3f4f7;
    /* SSO brand banners (NervalAI standard card — Mesaj Pa m values) */
    --sso-google-bg: #ffffff;
    --sso-google-ink: #3c4043;
    --sso-google-border: rgba(0, 0, 0, 0.12);
    --sso-facebook: #1877F2;
    --sso-facebook-hover: #1668d8;
    --sso-apple: #4a4a4a;
    --sso-apple-hover: #5a5a5a;
    /* Right 2/3 color story (Franck 2026-07-21: colorful, fun, PR-sy) */
    /* Atmospheric tech gradient (Franck 2026-07-22 reference):
       purple sweeping through blue into teal, line-waves over it. */
    --landing-tech-1: #7b5ff0;
    --landing-tech-2: #3b6fdc;
    --landing-tech-3: #0f9a93;
    /* The hero sky's edge hues (sampled from the widescreen composite's
       outer columns) — the "infinite border" extensions wear them. */
    --scene-sky-l: #b26a7b;
    --scene-sky-r: #da9491;
    /* The CTA pill: black-on-black, made visible by its halo (the
       Tchala frame treatment). Ring = burnished bronze of the mark's
       family; glow = the mark's champagne (sampled mean #cebe94). */
    --landing-pill: #070708;
    --landing-pill-ring: #9a7b4f;
    --landing-pill-glow: rgba(206, 190, 148, 0.38);
    --landing-pill-glow-soft: rgba(206, 190, 148, 0.16);
    --landing-pill-glow-hover: rgba(206, 190, 148, 0.5);
    --card-ink: #1c2b4a;           /* navy card titles */
    /* The designed flyer (Haiti–Brazil flyer lineage): near-black canvas,
       gold small caps, warm ink — plus the Bloomfield petal accents. */
    --flyer-canvas: #0e0d0b;
    --flyer-card: #17150f;
    --flyer-card-border: #2e2a1f;
    --flyer-gold: #c8a35a;
    --flyer-gold-bright: #e8d19a;
    --flyer-cream: #f3ead2;
    --flyer-white: #ffffff;
    --flyer-ink: #e6e1d4;
    --flyer-ink-dim: #a89f8c;
    --flyer-line: rgba(200, 163, 90, 0.4);
    --flyer-scrim: rgba(14, 13, 11, 0.55);
    --flyer-rose: #b0447a;
    --flyer-green: #2e6b4a;

    /* --- Service health (Ask screen). Semantic, deliberately NOT the accent:
       the accent means "acted on", these mean "is it working". Dark lifts
       each hue so it stays legible on the off-black page. --- */
    --health-ok: #2f7d5f;
    --health-warn: #96651a;
    --health-down: #c0392b;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --transition: 0.18s ease;
}

/* --- Dark theme (memo §4) — PO Manager dark lineage: black chrome,
   off-black work surface, greyish hairlines (Franck 2026-07-20).
   SAME luminance grammar as light: the work surface is the brightest
   dark, chrome recedes, the expanded panel is deepest; elevated
   surfaces (prompt pill, cards) lift clearly off the page. --- */
:root[data-theme="dark"] {
    --bg-page: #1a1a1d;            /* work surface: off-black, lightest dark */
    --bg-nav: #141416;             /* rail chrome: recessed black */
    --bg-panel-alt: #171719;       /* expanded panel: between rail and page (2026-07-20 flip) */
    --bg-card: #232327;            /* elevated: the prompt pill pops off the page */
    --bg-bubble: #26262b;
    --bg-hover: #232326;
    --bg-active: #1e2a35;
    /* Dark selection speaks BLUE (Franck 2026-07-20, PO Manager): the
       dark rail-icon blue at band strength — easier to read than grey
       on black, and the band and icons share one blue. Light keeps its
       grey selection canon. */
    --bg-active-cat: rgba(91, 114, 238, 0.22);
    --bg-active-sub: rgba(91, 114, 238, 0.22);
    --parent-underscore: #6a6a72;

    --text-primary: #ffffff;
    --text-secondary: #b4b4ba;
    --text-muted: #94949b;
    --text-placeholder: #8a8a92;

    /* Rail items and status-bar items stand out WHITE in dark (Franck
       2026-07-20, PO Manager model). #f2f2f4 reads as white without the
       halo pure #fff gets at small sizes on black. */
    --nav-ink: #f2f2f4;
    --status-ink: #f2f2f4;
    /* Highlighted item's font is PALE BLUE, hover band LIGHT BLUE
       (Franck 2026-07-20, PO Manager dark): active ink = the dark
       accent-deep steel blue; hover = the selection blue at half
       strength, so hover < selected reads at a glance. */
    --nav-ink-active: #7fb0cc;
    --nav-ink-active-sub: #7fb0cc; /* selected sub/folder ink: same pale blue as before */
    --search-send-bg: linear-gradient(135deg, #62626c 0%, #4d4d56 100%);  /* subdued grey, but clearly visible on the dark pill */
    --search-send-ink: #e4e4e9;
    --nav-hover: rgba(91, 114, 238, 0.12);

    --accent: #699bb8;
    --connector: #5b72ee;          /* leader line in dark: the selection band's own blue, opaque */
    --accent-deep: #7fb0cc;
    --accent-contrast: #0a0a0a;
    --accent-soft: rgba(105, 155, 184, 0.15);
    --accent-border: rgba(105, 155, 184, 0.3);

    --accent-gradient: linear-gradient(135deg, #3ec6ea 0%, #3f8ede 52%, #4d63dd 100%);
    --on-gradient: #ffffff;
    --accent-glow: 0 2px 12px rgba(70, 140, 225, 0.4);
    --accent-glow-strong: 0 3px 18px rgba(70, 140, 225, 0.55);
    --gradient-mean: #4292e1;      /* average of the dark gradient run */

    /* The greyish line (PO Manager): lighter than every surface it
       separates, so rail edge, panel edge, and the top rule all read.
       Lifted a step (Franck 2026-07-20): easier to read at a glance. */
    --border: #3d3d45;
    --border-light: #47474f;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(0, 0, 0, 0.35);

    /* Desk deepens in dark; the paper tokens are deliberately not
       overridden here — a white sheet on a dark desk (memo §20). */
    --bg-desk: #101013;
    --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 32px rgba(0, 0, 0, 0.6);
    --overlay-scrim: rgba(0, 0, 0, 0.68);

    --powered-bg: #0e0e10;         /* a step darker than the rail (light-mode analog) */
    --powered-ink: #c6c6cb;        /* light grey — the byline stays legible */

    --badge-generated-bg: rgba(52, 192, 142, 0.15);
    --badge-generated-ink: #34c08e;

    --on-accent: #ffffff;

    --ink-supporting: #8a8a91;

    --health-ok: #5cb98f;
    --health-warn: #d3a24a;
    --health-down: #e0705c;

    --icon-rail: #5b72ee;

    --cap-navy: #aebfe4;
    --cap-steel: #7d9cc8;
    --cap-sage: #9cbfa9;
    --cap-tag: #8b9199;
}