/* 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 */

    /* ─── Tints ───────────────────────────────────────────────────────── */
    /*
     * Desaturated washes of the brand hues, for a card that has to read as
     * BELONGING to a group rather than as ranked above the card beside it.
     * Each pairs a ground with the slightly darker edge that borders it.
     *
     * These existed already — the marketing site's plan cards, its three
     * pillars — but only as raw hex written at the use site, which is how
     * #fdf1e8 and #faeee7 ended up as two different answers to "the
     * terracotta tint". Naming them is what stops a third appearing, and
     * what let the member app's buy screen carry the same grounds as the
     * pricing table without copying hex into a third file.
     *
     * IMPORTANT: the marketing site does not load this file — site.css keeps
     * its own :root, hand-kept in step. A change here is a change there.
     *
     * Category, never hierarchy. On the site the ground says which band a
     * plan belongs to (regular hours vs flex hours); it never says "this is
     * the better plan". Reusing a tint to mean "recommended" would put the
     * same colour to opposite meanings on two surfaces.
     */

    --terracotta-tint:      #fdf1e8;
    --terracotta-tint-edge: #eed6c8;
    --sage-tint:            #f1f5ef;
    --sage-tint-edge:       #d8e3d4;
    --sand-tint:            #f6efe2;
    --sand-tint-edge:       #ddd0b8;

    /* ─── 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 along `opsz`, and we let the browser drive it
     * (font-optical-sizing: auto, the default): opsz follows the font size,
     * so labels and small headings get the sturdier text cut and big
     * headlines the finer display cut. Don't pin it with
     * font-variation-settings — pinning a display cut onto small text is what
     * made the hour labels and prices hard to read.
     */

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


    /* 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 */

  }

}