/* Odette design system.
   ─────────────────────────────────────────────────────────────────────────
   Tokens and interface primitives, shared. This file owns the design
   LANGUAGE — colour, type, buttons, radii, shadows — and nothing about the
   shape of any one page. Layout belongs to the consumer (landing.css today;
   the app later).

   Two themes. Ink is the default and sits on :root; Light overrides the same
   names under [data-theme="light"] on <html>. Consumers must read tokens, never
   raw hex, or the toggle stops working for them.

   --paper / --ink / --ink2 are deliberately theme-INVARIANT. The trophy banner
   and the screenshot window chrome read correctly on both grounds, and that is
   what keeps the toggle a token swap instead of a second stylesheet. */

:root {
    /* ── ground ──────────────────────────────────────────────────────────── */
    --background:  #0B0F19;   /* page ground                                  */
    --sunken:      #070A11;   /* one step BELOW the ground: CTA band, chrome  */

    /* ── hairlines — translucent, so they sit on any surface ─────────────── */
    /* Finer than a template's: at .08/.15 the rules competed with the type.  */
    --hair:        rgba(255, 255, 255, 0.06);
    --hair2:       rgba(255, 255, 255, 0.13);   /* the visible one            */

    /* ── colour — ONE accent, plus the three states money needs ──────────── */
    --primary:     #7DD3FC;   /* links, interactive, eyebrows                 */
    --positive:    #5EDD9C;   /* real gains only — never decoration           */
    --negative:    #E86A62;
    --caution:     #D9A83C;   /* the step between positive and negative       */

    /* ── type colour: three greys, strictly ranked ───────────────────────── */
    --t1:          #F5F7FA;   /* headings, values                             */
    --t2:          #C2CBD8;   /* body                                         */
    --t3:          #7E8A9C;   /* labels, captions                             */
    --hero-sub:    #C9D3E0;   /* the pitch line only — one step above body    */

    /* ── surfaces ────────────────────────────────────────────────────────── */
    /* Chips are FLAT SOLIDS, not translucent white. A .07 white fill glows on
       a dark ground, and five glowing chips in a nav is the template look the
       crisp pass exists to remove — see design/README.md. */
    --chip-fill:   #141927;                     /* nav chips, menu rows       */
    --chip-hover:  #1B2234;
    --chip-text:   #A9B4C4;
    --glow:        rgba(125, 211, 252, 0.13);   /* the ONE atmospheric effect */
    /* Tints of --primary: the band that marks the subject of a comparison,
       and the hairline that makes it read as a raised object rather than a
       wash. Mixed by hand rather than by color-mix so they degrade flat. */
    --subject-band: rgba(125, 211, 252, 0.05);
    --subject-edge: rgba(125, 211, 252, 0.22);
    /* The outline on a secondary button. Brighter than --hair2: it is an
       interactive edge, not a divider. */
    --btn-line:    rgba(255, 255, 255, 0.16);

    /* ── theme-invariant: correct on both grounds ────────────────────────── */
    --paper:       #E7E6E2;                     /* the competition banner     */
    --ink:         #0F1520;                     /* type ON paper; dark fills  */
    --ink2:        rgba(15, 21, 32, 0.65);  /* 4.8:1 on bare paper; .60 was 4.4
                                               and the label sits on the trophy art */
    --ink-line:    rgba(15, 21, 32, 0.12);

    /* ── shadow — depth, not decoration ──────────────────────────────────── */
    --shadow-win:  0 40px 90px rgba(0, 0, 0, 0.5);
    --shadow-step: 0 30px 70px -30px rgba(0, 0, 0, 0.6);

    /* ── type ────────────────────────────────────────────────────────────── */
    /* One sans for EVERYTHING that is not a display headline: body, labels,
       prices, buttons. The serif is a display role and nothing else. Numbers
       stay aligned through .num's tabular figures, not through a monospace —
       a mono register was tried here and retired on review. */
    --sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

    /* ── radius — buttons are the only rounded rectangles in the language ──
       Tighter than before across the board: a large radius on a small control
       reads as friendly, and this product is not selling friendly. */
    --r-btn:   8px;
    /* Unused by the landing since the crisp pass tightened its surfaces to
       literals, but the app's stylesheets read a token of this name; it stays
       as the shared value they will align on. */
    --r-card:  14px;

    /* ── motion ──────────────────────────────────────────────────────────── */
    --ease-house:  cubic-bezier(.76, 0, .24, 1);   /* state changes           */
    --ease-settle: cubic-bezier(.65, 0, 0, 1);     /* long, scroll-linked     */
}

[data-theme="light"] {
    --background:  #F5F4F1;   /* warm off-white, never pure #FFF             */
    --sunken:      #ECEBE6;

    --hair:        rgba(15, 21, 32, 0.09);
    --hair2:       rgba(15, 21, 32, 0.16);

    /* Deepened for contrast on a light ground: the dark-theme values are far
       too pale to read here, and they carry meaning (gain / loss). */
    --primary:     #1B6FA8;
    --positive:    #15803D;
    --negative:    #C81E1E;   /* #DC2626 measured 4.39:1 here — under the floor */
    --caution:     #B45309;   /* the ink amber is unreadable on paper         */

    --t1:          #0F1520;
    --t2:          #3A4354;
    --t3:          #626E84;   /* measured 4.7:1 on the ground; #69748A was 4.3 */
    --hero-sub:    #2E3950;

    /* Same move as ink, inverted: a flat warm grey, one step off the paper. */
    --chip-fill:   #E9E8E3;
    --chip-hover:  #DEDCD4;
    --chip-text:   #556279;   /* 5.0:1 on the chip; #5F6B7E was 4.4  */
    --glow:        rgba(125, 211, 252, 0.30);   /* needs more to register     */
    --subject-band: rgba(27, 111, 168, 0.06);   /* the light --primary, tinted */
    --subject-edge: rgba(27, 111, 168, 0.25);
    --btn-line:    rgba(15, 21, 32, 0.22);

    --shadow-win:  0 40px 90px rgba(15, 21, 32, 0.18);
    --shadow-step: 0 30px 70px -30px rgba(15, 21, 32, 0.16);
}

/* ── Type roles ───────────────────────────────────────────────────────────
   .display is the serif. It is a ROLE, not a font switch to sprinkle around:
   page and section headlines only. Everything else is --sans. */
.display {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: var(--t1);
}

/* The four display MOMENTS — hero, section head, statement, closing ask — are
   tracked harder still. This is the single largest difference between a serif
   headline that reads as set and one that reads as typed: the references run
   -3% and -5% at this size, and loose tracking is what made ours look cheap.
   Below ~2rem the serif needs its width back, which is why .display alone is
   the gentler -2%. */
.hero-title, .shead, .statement, .cta-title { letter-spacing: -0.03em; }

/* Numbers align in columns and never jitter as they tick. */
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Section masthead pair — every section opens with these two. */
.shead {
    font-family: var(--display);
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.06;
    color: var(--t1);
}
.ssub {
    font-size: 15px;
    color: var(--t3);
    margin-top: 0.75rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Caps live HERE, not in the markup: the text stays readable and translatable
   in HTML, and one rule change would undo the whole treatment.

   Buttons are also the only rounded rectangles in the system. No pills, no
   bordered chips — a border on a small fill reads as a chip, which is the
   thing this language deliberately avoids. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.7rem;
    border: 0;
    border-radius: var(--r-btn);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s var(--ease-house),
                border-color .2s var(--ease-house),
                color .2s var(--ease-house);
}

/* The primary fill INVERTS with the theme: it must stay the brightest thing
   on ink and the darkest thing on paper, which is the same intent both ways.

   THE HOVER LANGUAGE, stated once for every control on the page: a button's
   hover moves its SURFACE one step and never its text; only a plain text link
   hovers to the accent. Each hover below redeclares its color on purpose —
   the global `a:hover { color: var(--primary) }` (0,1,1) outranks a button's
   base color (0,1,0), and any <a>-built button whose hover omits color turns
   its label blue. That was a shipped bug; do not prune these. */
.btn-primary       { background: #FDFDFD; color: var(--ink); }
.btn-primary:hover { background: #E7E6E2; color: var(--ink); }
[data-theme="light"] .btn-primary       { background: var(--ink); color: #FDFDFD; }
[data-theme="light"] .btn-primary:hover { background: #2A3242; color: #FDFDFD; }

/* The secondary is an OUTLINE, not a second fill. Two filled buttons side by
   side make the primary argue for attention; an outline concedes it. */
.btn-soft {
    background: transparent;
    border: 1px solid var(--btn-line);
    color: var(--t1);
}
.btn-soft:hover { border-color: var(--hair2); background: var(--chip-fill); color: var(--t1); }

/* On the paper banner, where the ground is invariant, so is the button. */
.btn-ink       { background: var(--ink); color: #FDFDFD; }
.btn-ink:hover { background: #2A3242; color: #FDFDFD; }

/* Nav-scale button. Same shape, smaller — a second geometry would give the
   page two button languages. */
.nbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border: 0;
    border-radius: 9px;
    background: var(--chip-fill);
    color: var(--chip-text);
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s var(--ease-house), color .2s var(--ease-house);
}
.nbtn:hover { background: var(--chip-hover); color: var(--t1); }

.nbtn-accent       { background: #FDFDFD; color: var(--ink); }
.nbtn-accent:hover { background: #E7E6E2; color: var(--ink); }
[data-theme="light"] .nbtn-accent       { background: var(--ink); color: #FDFDFD; }
[data-theme="light"] .nbtn-accent:hover { background: #2A3242; color: #FDFDFD; }

/* ── Focus — one visible treatment on every interactive primitive ─────────
   Scoped to :focus-visible so a mouse click never draws it, and never removed
   without a replacement. */
.btn:focus-visible,
.nbtn:focus-visible,
a:focus-visible,
summary:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ── Touch targets ────────────────────────────────────────────────────────
   Fingers need ~44px; a pointer does not. Applied by input type rather than
   viewport width, so a touch laptop gets it too. */
@media (pointer: coarse) {
    .btn  { min-height: 44px; }
    .nbtn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .nbtn { transition: none; }
}