/*
 * TIER 2 - semantic.
 *
 * Role-named aliases over Tier 1. This is the contract: every name here is stable
 * and is the ONLY vocabulary component CSS may use for colour. See
 * docs/frontend/design-tokens.md.
 *
 * Why the indirection: the Design System names its tokens by hue - --brand-green,
 * --status-green, --fg-1..8. "Green" is baked into eleven names, but mytu is teal
 * and griner is cyan, so a component referencing --brand-green is a component those
 * two brands cannot theme. --color-primary breaks that coupling.
 *
 * The values below are Ginger's. Tier 3 overrides a subset per brand, emitted into
 * :root by _base.twig from theme.json. A brand typically overrides only the primary
 * ramp, the two font families, --surface-app and --text-default.
 *
 * SCOPE NOTE. Colour, status, elevation, focus, radius, type and layout get Tier 2
 * names because each carries design meaning a brand might reasonably reposition.
 * Spacing deliberately does not: no brand overrides it, and --space-12 aliasing
 * --g-space-12 would add a level of indirection that conveys nothing. Components
 * reference the --g-space-* scale directly. That is the one sanctioned exception to
 * "components use Tier 2 only", and it is limited to spacing.
 */

:root {
    /* ----------------------------------------------------------------- brand */

    /*
     * The ramp is the Design System's, not Admin's, per the precedence rule.
     * Admin runs its primary button at #00D158 and treats #0ADE63 as the :active
     * step; the Design System has #0ADE63 as the default and #00D158 as hover, and
     * its own accessibility note ("use --color-primary-hover for body-size text on
     * white") confirms that direction. So the solid accent gets brighter than
     * Admin's, deliberately.
     */
    --color-primary: var(--g-green-500);
    --color-primary-hover: var(--g-green-600);
    --color-primary-active: var(--g-green-650);
    --color-primary-disabled: var(--g-green-400);

    /* Tinted fill: active tab, active sidebar row, highlight button. */
    --color-primary-subtle: var(--g-green-200);
    --color-primary-subtle-hover: var(--g-green-300);

    /* Text and icons sitting on -subtle. Never --color-primary: it fails contrast. */
    --color-primary-on-subtle: var(--g-green-700);

    /* Text on the solid accent. */
    --color-on-primary: var(--g-white);

    /* The pressed step below -subtle. Admin's lightest mint. */
    --color-primary-subtle-active: var(--g-green-100);

    /*
     * Primary at low alpha, for washes that must sit over an arbitrary surface -
     * highlight rows, chip fills, tinted borders. Kept as literal rgba() rather
     * than color-mix() so the value is legible and diffable, at the cost of having
     * to restate the channel triplet when a brand overrides the primary ramp.
     */
    --color-primary-alpha-05: rgba(10, 222, 99, 0.05);
    --color-primary-alpha-10: rgba(10, 222, 99, 0.1);
    --color-primary-alpha-20: rgba(10, 222, 99, 0.2);
    --color-primary-hover-alpha-30: rgba(0, 209, 88, 0.3);

    /* ------------------------------------------------------------------ text */

    --text-strong: var(--g-slate-900); /* h1 */
    --text-default: var(--g-slate-800); /* body */
    --text-secondary: var(--g-slate-600); /* sidebar default, table cells */
    --text-muted: var(--g-slate-500); /* field labels */
    --text-subtle: var(--g-slate-400); /* icons, muted meta */
    --text-placeholder: var(--g-slate-300); /* placeholders, section eyebrows */
    --text-disabled: var(--g-slate-200);
    --text-overlay-muted: rgba(0, 0, 0, 0.3); /* meta text over a translucent panel */

    /* -------------------------------------------------------------- surfaces */

    /*
     * The page canvas, behind the cards. This is the token brands actually differ
     * on - ginger is warm grey, mytu and griner are cool greys, nopayn is dark navy.
     * It is a CANVAS, NOT A COMPONENT HOST: only the page background, page heading
     * and nav items sit on it. --surface-app is what components sit on, and stays
     * white for every brand, which is why no component needs a dark variant.
     */
    --surface-canvas: var(--g-warm-100);
    --text-on-canvas: var(--text-secondary);

    --surface-app: var(--g-white); /* content background */
    --surface-rail: var(--g-grey-50); /* sidebar, side panels, disabled inputs */
    --surface-input: var(--g-grey-75); /* resting input fill */
    --surface-hover: var(--g-warm-100); /* table row hover - warm, per the DS */
    --surface-muted: var(--g-grey-100); /* ghost button hover, sidebar row hover */
    --surface-muted-hover: var(--g-grey-150); /* the step past -muted */

    /*
     * A dark canvas. nopayn is the only brand that uses one, and only for the page
     * background, page heading and nav items. It is a CANVAS, NEVER A COMPONENT
     * HOST: no table, badge or form may sit directly on it. See whitelabelling.md.
     */
    --surface-inverse: var(--g-slate-900);

    /* Translucent panels: the Spotlight overlay and its search line. */
    --surface-app-alpha-90: rgba(255, 255, 255, 0.9);
    --surface-app-alpha-98: rgba(255, 255, 255, 0.98);
    --surface-muted-alpha-50: rgba(239, 241, 245, 0.5);

    /* --------------------------------------------------------------- borders */

    --border-default: var(--g-border-100);
    --border-subtle: var(--g-border-150); /* table td, field-row dividers */
    --border-strong: var(--g-border-200); /* disabled control outlines */
    --border-warm: var(--g-border-warm); /* the warm divider Admin uses on cards */
    --border-input: var(--g-grey-150); /* resting input outline */
    --border-overlay: rgba(75, 94, 117, 0.15); /* hairline on translucent panels */

    /* Ginger underlines links in yellow. Tier 3 overrides it; the other three
       brands underline in their own primary. */
    --accent-underline: var(--g-yellow-300);

    /* ---------------------------------------------------------------- status */

    /*
     * Five roles, three slots each. Named by ROLE, never by hue - the Design System
     * ships --status-green / --status-red, which a brand whose success colour is
     * not green cannot use.
     *
     * The -bg and -border alphas are the Design System's, kept as literal rgba()
     * rather than colour-mixed so the values stay diffable against
     * colors_and_type.css.
     */
    --status-success-fg: var(--g-success);
    --status-success-bg: rgba(0, 202, 85, 0.07);
    --status-success-border: rgba(0, 209, 88, 0.15);

    --status-info-fg: var(--g-info);
    --status-info-bg: rgba(63, 140, 255, 0.07);
    --status-info-border: rgba(63, 140, 255, 0.1);

    --status-warning-fg: var(--g-warning);
    --status-warning-bg: rgba(247, 195, 68, 0.1);
    --status-warning-border: rgba(247, 195, 68, 0.2);

    --status-danger-fg: var(--g-danger);
    --status-danger-bg: rgba(254, 110, 110, 0.08);
    --status-danger-border: rgba(254, 110, 110, 0.1);

    --status-neutral-fg: var(--g-slate-400); /* DS conflict resolved to the token */
    --status-neutral-bg: rgba(100, 114, 130, 0.07);
    --status-neutral-border: rgba(131, 142, 155, 0.1);

    /* Destructive actions, which are not a status badge but share the danger hue. */
    --color-danger: var(--g-danger);
    --color-danger-hover: var(--g-danger-strong);
    --color-danger-subtle: rgba(255, 72, 72, 0.08);
    --color-danger-subtle-hover: rgba(255, 72, 72, 0.14);
    --color-on-danger: var(--g-white);
    --color-danger-alpha-05: rgba(255, 72, 72, 0.05);
    --color-danger-alpha-10: rgba(255, 72, 72, 0.1);
    --color-danger-hover-alpha-60: rgba(244, 55, 55, 0.6);

    /* ---------------------------------------------------- elevation & focus */

    --shadow-card: var(--g-shadow-card);
    --shadow-dropdown: var(--g-shadow-dropdown);
    --shadow-popover: var(--g-shadow-popover);

    /* Brand-coupled: Tier 3 overrides this alongside the primary ramp. */
    --focus-ring: 0 0 0 2px rgba(10, 222, 99, 0.2);
    --focus-ring-danger: 0 0 0 2px rgba(255, 72, 72, 0.15);

    --scrim: rgba(18, 18, 18, 0.4); /* modal and spotlight backdrop */

    /* -------------------------------------------------- page chrome & links */

    /*
     * These carry a real per-brand value from theme.json, so each needs its own token
     * rather than folding into a nearby role.
     */
    --link-color: var(--text-default);
    --link-underline: var(--accent-underline);

    --nav-item-color: var(--text-strong);
    --nav-item-active-color: var(--color-primary);

    /* The hairline accent: active sub-nav underline, login card edge, custom badge.
       Ginger's is the primary, but nopayn and griner both pick a different green. */
    --accent-detail: var(--color-primary);

    --surface-footer: var(--surface-inverse);
    --text-on-surface: var(--text-default); /* body copy inside a card or table */

    /* ---------------------------------------------------------------- radius */

    --radius-content-card: 0; /* ginger is square; the other three are 1rem */
    --radius-control: var(--g-radius-md); /* buttons, inputs, badges */
    --radius-pill: var(--g-radius-pill);
    --radius-card: var(--g-radius-lg);
    --radius-panel: var(--g-radius-xl);
    --radius-round: var(--g-radius-full);

    /* ------------------------------------------------------------ typography */

    /* Tier 3 overrides these two per brand; --font-mono is never themed. */
    --font-sans: var(--g-family-sans);
    --font-display: var(--g-family-display);
    --font-mono: var(--g-family-mono);

    --font-size-eyebrow: var(--g-font-size-11); /* uppercase section labels */
    --font-size-caption: var(--g-font-size-11);
    --font-size-meta: var(--g-font-size-12); /* table cells, badges */
    --font-size-body: var(--g-font-size-13);
    --font-size-body-lg: var(--g-font-size-14);
    --font-size-section: var(--g-font-size-16);
    --font-size-subhero: var(--g-font-size-20);
    --font-size-h2: var(--g-font-size-24);
    --font-size-stat: var(--g-font-size-32); /* dashboard stat numbers */
    --font-size-h1: var(--g-font-size-40);

    --line-height-tight: var(--g-line-height-tight);
    --line-height-snug: var(--g-line-height-snug);
    --line-height-base: var(--g-line-height-base);

    --font-weight-regular: var(--g-font-weight-regular);
    --font-weight-medium: var(--g-font-weight-medium);
    --font-weight-bold: var(--g-font-weight-bold);
    /* mytu and griner set their headings at 600; ginger and nopayn run them regular. */
    --font-weight-heading: var(--g-font-weight-regular);

    --tracking-heading: var(--g-tracking-tight);
    --tracking-eyebrow: var(--g-tracking-eyebrow);

    /* ---------------------------------------------------------------- motion */

    --ease-out: var(--g-ease-out);
    --duration-fast: var(--g-duration-fast);
    --duration-medium: var(--g-duration-medium);
    --duration-slow: var(--g-duration-slow);

    /*
     * The transition every interactive component uses for its own states.
     *
     * Enumerated rather than `all`, and that is the point. The ginger-admin library
     * puts `transition: 200ms all` on every anchor, so any component whose hover
     * state accidentally reaches a layout property animates its own box - which is
     * both a visible wobble and, on a control the pointer is sitting inside, a
     * hover/unhover feedback loop. Naming the paint properties makes that class of
     * bug impossible rather than merely absent.
     */
    --transition-paint: color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);

    /* ---------------------------------------------------------------- layout */

    --layout-sidebar-width: 260px;
    --layout-sidebar-collapsed: 104px; /* from Admin's Navigation.vue */
    --layout-topchrome-height: 64px;
    --layout-rail-width: 220px;
    --layout-field-label-width: 200px; /* DS conflict resolved: 200, not 180 */
    --layout-search-width: 300px; /* DS conflict resolved: 300, not 400/420 */
}