/* Kin OS — platform tokens.
 *
 * Everything here is brand-independent: the paper surface system, layout, type scale, radii,
 * elevation, motion and the operational status palette. Brand colour lives in brands.css and
 * nowhere else.
 *
 * THE FOUNDATION (P7.2 §1, §28): a clean white working surface under a strong dark brand
 * chrome. The white paper scale is shared by all four workspaces — the platform's own
 * neutrals, the way white and black are, not any brand's colour. The dark chrome — top bar,
 * hero and primary rail as one continuous environment — is where each brand's dark lives and
 * where its accent works hardest. Everything below the hero is white and operational.
 *
 * Two rules hold the system together:
 *
 *   1. No component file contains a brand value. Components reference --brand-* tokens,
 *      which are only ever defined per workspace in brands.css.
 *   2. Status colour is deliberately NOT branded. Active means the same thing in CapacityCo
 *      as it does in HelloKindred, and a user who moves between workspaces should not have to
 *      relearn it.
 */

:root {
    /* ---- Surfaces. A clean near-white scale, shared by every workspace (P7.2 §3, §28).
           paper-0 is white — the application workspace and its cards, separated by hairlines
           and soft shadow; paper-2 is the cool light-neutral ground of the entry screens;
           paper-1 and paper-3 are the soft and sunken steps between. P7.1 tried a warm pearl;
           the approved reference is this cooler, cleaner neutral. */
    --paper-0: #ffffff;
    --paper-1: #f7f8fa;
    --paper-2: #eff1f4;
    --paper-3: #e5e8ec;

    /* ---- Spacing. A 4px base, so density stays predictable across dense operational screens. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ---- Type. Operational, not editorial: small steps, tight leading, and one deliberate
           display size for the Home greeting. */
    --text-xs: 0.72rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.0625rem;
    /* A box's own title (QCR-20261104-01.01, Jakes's third round): one step above a field
       label at --text-md and one below a section title at --text-lg, so card and group titles
       lead the labels inside them. */
    --text-title: 1.1875rem;
    --text-lg: 1.35rem;
    --text-xl: 1.8rem;

    --leading-tight: 1.22;
    --leading-normal: 1.55;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---- Shape. Softer than P7 but still an operational tool, not a consumer app. */
    /* THE ONE INSET A SECTION USES (final close-out §20, §21). Head, body, foot, panel and
       disclosure summary all take this, so a heading and the fields under it share a left edge
       and every card agrees on its rhythm. Before it there were five different values for the
       same idea, which is why some cards felt right and others had fields pressed against the
       border. Tune the inset here and the whole product moves together. */
    --card-inset: var(--space-4);

    /* THE SPACE A SEARCH BOX KEEPS FOR ITS OWN ICON (D4, P23-204). The magnifier is drawn over
       the input rather than beside it, so the box has to reserve room for it in its padding or
       the placeholder runs underneath the glyph. Stated once, because it is claimed in three
       rules now: the search input's left padding, its right padding where the clear control
       sits, and the restatement that keeps both when the box is composed inside a form field.
       Three literals of the same number is how one of them gets edited on its own. */
    --search-icon-space: 2.2rem;

    --radius-sm: 4px;
    --radius: 7px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* ---- Elevation. Soft, layered, and low — depth replaces borders where a border would be
           the third box in a row. The tint is a desaturated navy so shadows sit warm on pearl
           instead of going grey. */
    --shadow-sm: 0 1px 2px rgba(24, 32, 46, 0.05);
    --shadow: 0 1px 2px rgba(24, 32, 46, 0.04), 0 4px 16px rgba(24, 32, 46, 0.06);
    --shadow-lift: 0 2px 4px rgba(24, 32, 46, 0.05), 0 10px 28px rgba(24, 32, 46, 0.10);
    --shadow-lg: 0 4px 10px rgba(24, 32, 46, 0.08), 0 24px 60px rgba(24, 32, 46, 0.16);

    /* ---- Layout. The rails are fixed-width so content never reflows when a module opens. */
    --rail-width: 234px;
    --rail-width-collapsed: 64px;
    --rail-secondary-width: 212px;

    /* There was a --rail-tertiary-width here for one commit, 188px, for a subsection rail of its
       own. Three rails on one edge measured 464px before content and the width was the reason it
       was rejected, so the subsections moved inside the module rail and this token went with
       them. No third width is needed: they are indented within the 212px above (P25-206). */
    --header-height: 54px;

    /* ---- Motion. Deliberate and legible (P7.1 §11): rail movement is slow enough to read as
           spatial movement, everything else stays quick. Every duration is a token so the
           reduced-motion override can flatten all of them at once. */
    --motion-fast: 140ms;
    --motion: 220ms;
    --motion-rail: 320ms;
    --motion-enter: 260ms;
    /* The workspace door journey (P7.3): two page-clone leaves swing outward on their outer
       hinges while the camera travels through, onto the login already rendered behind them.
       shell.js adds a short render lead, so click-to-fully-open is the agreed ~2 seconds. */
    --motion-doors: 1700ms;
    /* The opacity-only substitute beat used by the reduced-motion crossfades. Deliberately
       NOT collapsed by the reduced-motion override: it carries no movement to reduce. */
    --motion-fade: 200ms;
    --motion-shimmer: 1300ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-rail: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-doors: cubic-bezier(0.72, 0, 0.16, 1);

    /* ---- Operational status palette.
           Fixed across all four workspaces. Contrast checked against a white surface; every
           status is also carried by its label text and its marker shape — colour is never the
           only signal. */
    --status-active-ink: #17603c;
    --status-active-bg: #e6f4ec;
    --status-active-line: #b6ddc7;

    --status-scheduled-ink: #1c4f7c;
    --status-scheduled-bg: #e8f1f9;
    --status-scheduled-line: #b9d4ea;

    --status-draft-ink: #4c5766;
    --status-draft-bg: #eef1f4;
    --status-draft-line: #d3dae2;

    --status-ended-ink: #6a4a12;
    --status-ended-bg: #fbf2e0;
    --status-ended-line: #e8d7ad;

    --status-cancelled-ink: #8f2d2d;
    --status-cancelled-bg: #fbecec;
    --status-cancelled-line: #eecccc;

    --status-inactive-ink: #4c5766;
    --status-inactive-bg: #eef1f4;
    --status-inactive-line: #d3dae2;

    /* ENTERED IN ERROR (final close-out §12). The quietest status in the palette, deliberately:
       a voided record is not a warning and not an outcome, it is a record that should not have
       existed. It must recede while staying legible — so it takes the neutral family a shade
       cooler than Draft, and its pill is DASHED, which is what actually distinguishes it from
       the other neutrals in greyscale. */
    --status-voided-ink: #5b6472;
    --status-voided-bg: #f4f5f7;
    --status-voided-line: #cdd4dd;

    /* Message states reuse the same three semantics so a blocked action and an Ended pill do
       not argue with each other. */
    --state-ok-ink: var(--status-active-ink);
    --state-ok-bg: var(--status-active-bg);
    --state-ok-line: var(--status-active-line);
    --state-stop-ink: var(--status-cancelled-ink);
    --state-stop-bg: var(--status-cancelled-bg);
    --state-stop-line: var(--status-cancelled-line);
    --state-note-ink: var(--status-ended-ink);
    --state-note-bg: var(--status-ended-bg);
    --state-note-line: var(--status-ended-line);

    --mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;

    /* The size a code takes beside ordinary text (QCR-20261104-01.03): the same size, so the face
       is the only difference (Jakes, second round). The first round set 1.08em to match capital
       heights (Consolas 65 against Gilroy 71 at 100px), and a 13-digit identifier then read as
       larger than the values beside it, because Consolas is also wider. At 0.92em, before that,
       codes read as smaller. One place to tune it, every code reads it. */
    --mono-match: 1em;
}

/* Reduced motion is honoured by collapsing the tokens, not by disabling individual rules.
   Rail movement, hover lifts and entrances then still *happen* — they simply happen
   instantly, so the navigation they drive is unaffected (P7.1 §32).

   The two JOURNEY tokens are the deliberate exception (P7.2). Reduced motion means no
   movement, not no sequence: the barn-door beats keep real (gentler) durations, and
   entry.css swaps their animations for opacity-only crossfades — the standard accessible
   substitute. This matters doubly here because Windows over RDP reports reduced motion by
   default, which would otherwise erase the arrival journey for every user of a hosted
   Kin OS, the product owner included.

   THE OVERRIDE (P7.3). Every reduced-motion rule in Kin OS is scoped
   `:root:not([data-motion="full"])`, so `?motion=full` opts one browser back into the
   designed motion and `?motion=auto` returns it to the operating system's answer
   (App.razor sets the attribute before first paint; the choice persists per browser).
   It exists because a hosted product whose only access path is RDP is otherwise
   impossible to design motion for — the author can never see what everyone else sees.
   The operating system stays the DEFAULT: nobody is opted in without asking. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) {
        --motion-fast: 1ms;
        --motion: 1ms;
        --motion-rail: 1ms;
        --motion-enter: 1ms;
        --motion-doors: 600ms;
        --motion-shimmer: 1ms;
    }

    :root:not([data-motion="full"]) *,
    :root:not([data-motion="full"]) *::before,
    :root:not([data-motion="full"]) *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}