/* app/assets/stylesheets/tokens.css
 *
 * FICO design tokens — the single source of truth for every cross-cutting
 * value shared by the marketing site and the member app: colour, type,
 * z-index, motion.
 *
 * Palette lifted from the room itself: the woven wall hanging (terracotta /
 * sage / navy bands) and the terracotta coffee menu board with navy price
 * blocks. The site established it; the app now reads the same values, so the
 * two surfaces are one product rather than two that merely share a logo.
 *
 * Hex, not OKLCH. An earlier version of this file carried an OKLCH scale while
 * app/assets/tailwind/application.css carried the same palette in hex — two
 * sources that could drift, and did. The site's 1,096 lines are authored
 * against these hex values, so hex is the form that survives; converting the
 * site would be a large diff for no visible gain.
 *
 * Consumed by:
 *   - app/assets/tailwind/application.css  (member app, via @theme)
 *
 * NOT yet by the marketing site. app/assets/site/site.css still carries its
 * own :root with the same brand values, because the site layout loads exactly
 * one stylesheet and adding a second link costs it a round-trip on the
 * critical path — a real regression on a live, performance-tuned page for no
 * visible gain. The values here were copied from there and must be kept in
 * step by hand until the site's build can inline this file. Change one,
 * change both; the palette block below is the half that is duplicated.
 *
 * A colour used by only ONE surface does not belong here. This file is the
 * shared vocabulary; local values stay local.
 */

@layer app-base {

  :root {

    /* ─── Brand palette ───────────────────────────────────────────────── */

    --terracotta:      #b0472a;   /* primary action, headline accent */
    --terracotta-deep: #8f3620;   /* pressed / hover on terracotta */
    --navy:            #0e3a56;   /* structural dark: chrome, dark surfaces */
    --navy-deep:       #092838;   /* deepest ground; behind-content field */
    /* Navy opened up towards teal. Not a new brand colour: same hue family,
       lifted in lightness and chroma so it reads as its own surface beside
       --navy rather than as a slightly-off copy of it (--navy-deep sits at
       1.28:1 against --navy, which is the failure mode this avoids). For the
       one row on a screen that must look distinct from both the terracotta
       hero and the navy actions — see Ui::Home::BoothStatusStrip. Carries
       cream text at 6.7:1. */
    --navy-lift:       #14607d;
    --sage:            #8fa98c;
    --sage-pale:       #c3d2bd;   /* type + icons on navy */
    /* Darkened sage for surfaces carrying cream text: bare --sage is only
       2.5:1 against --cream, this shade is 6:1. */
    --sage-deep:       #4f6a4c;
    --cream:           #fffaf2;   /* page ground */
    --sand:            #e8dccb;   /* raised surface, hairlines */
    --ink:             #2a2622;   /* body text */
    /* 3 points darker than the design's #6b6157: that shade is 4.47:1 on
       --sand, a hair under WCAG AA's 4.5:1. This one is 4.68:1. */
    --ink-soft:        #685e54;   /* secondary text */

    /* ─── Status ──────────────────────────────────────────────────────── */
    /*
     * Green is a STATUS colour, not a brand colour. It says "confirmed" or
     * "free" and nothing else — the app's structural dark is navy and its
     * primary action is terracotta. Kept narrow deliberately: a green button
     * would read as an action, which is the meaning terracotta owns.
     */

    --confirmed: var(--sage-deep);
    --free:      var(--sage);
    --busy:      var(--ink-soft);
    --pending:   #b8862f;         /* warm amber; distinct from terracotta */

    /* ─── Typography ──────────────────────────────────────────────────── */
    /*
     * Fraunces (display) + Nunito (body), self-hosted in app/assets/fonts and
     * served to both surfaces by Propshaft. @font-face lives with each
     * surface's stylesheet; the families are named here so both agree.
     *
     * Fraunces is variable and its `opsz` axis DEFAULTS TO 9 — the caption
     * cut, drawn to survive at 10px. Rendered at headline size it looks
     * visibly blunter and lower-contrast than intended. Every display setting
     * must therefore pin opsz explicitly; the two values below are the only
     * ones either surface uses.
     */

    --display: "Fraunces", Georgia, serif;
    --body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --opsz-heading: 100;   /* headings */
    --opsz-display: 144;   /* the "co" device, prices, hour times, balances */

    /* Nunito's x-height (0.484) runs ~5% taller than Outfit's (0.460), which
       this replaced, so it reads heavier at the same nominal weight. 325
       keeps the airy-against-the-serif feel the design asks for. */
    --weight-body: 325;

    /* Uppercase eyebrow / label tracking. The design's 0.12–0.18em range
       collapses to one value; the difference at these sizes is negligible. */
    --label-tracking: 0.14em;

    /* ─── Z-index scale ───────────────────────────────────────────────── */

    --z-content:  10;
    --z-nav:      20;
    --z-overlay:  30;
    --z-dropdown: 40;
    --z-dialog:   50;
    --z-tooltip:  60;
    --z-flash:    70;

    /* ─── Motion ──────────────────────────────────────────────────────── */
    /*
     * One easing curve for both surfaces. The site's buttons and cards lift
     * on hover with cubic-bezier(.2,.8,.3,1); the app inherits it so a
     * pressed control feels the same in either place.
     */

    --brand-ease:      cubic-bezier(.2, .8, .3, 1);
    --ease-out-expo:   cubic-bezier(.16, 1, .3, 1);
    --duration-fast:   100ms;
    --duration-normal: 200ms;
    --duration-slow:   400ms;

    /* ─── Shape ───────────────────────────────────────────────────────── */

    --shape-panel: 1.5rem;    /* panel / large surface */
    --shape-card:  1.25rem;   /* card */
    --shape-media: 0.85rem;   /* photo in a card, or leading a page */
    --shape-pill:  999px;     /* buttons, chips, avatars */

  }

}