/* ════════════════════════════════════════════════════════════════
   USA TIMES — BRAND STYLESHEET (single source of truth)
   v1.0 · 2026-06-12

   THIS FILE IS THE REFERENCE. Every surface — news pages, booking
   flows, account pages, custom routes, future mu-plugins — reads
   these tokens. Do not hardcode brand colors/fonts/sizes anywhere
   else; write var(--ut-…) instead.

   Loaded sitewide at enqueue priority 1 by usat-brand.php, so every
   later stylesheet can reference the tokens.

   ── BRAND IN ONE PARAGRAPH ──────────────────────────────────────
   USA Times is a newspaper that runs a fleet. The look is print:
   ink-on-paper, hairline rules, confident serifs, a navy/red
   masthead. Crisp like nytimes.com — not glassy like an app store.
   When in doubt: flatter, sharper, quieter.

   ── TYPE ROLES ──────────────────────────────────────────────────
   display   Fraunces        product surfaces (booking, account,
                             wallet numerals, modals)
   headline  Playfair Display news headlines (home, category,
                             article h1) — never on product UI
   serif     Source Serif 4  article body copy, deks
   ui        Inter           nav, kickers, buttons, forms, captions

   ── COLOR ROLES ─────────────────────────────────────────────────
   ink        #121212  text on paper (NYT-black, not pure black)
   navy       #0A3F93  brand blue — links, primary buttons, kickers
   red        #D41A22  masthead accent, danger, active marker —
                       use sparingly: rules and markers, not fills
   paper      #FFFFFF  page
   cream      #FBFAF6  app-surface cards (product pages only)
   hairline   #E2E2E2  cool rule (news side)
   hairline-w #E3DFD3  warm rule (product side, on cream)
   rule-dark  #121212  2px section rules (masthead, section heads)
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ── color ─────────────────────────────────────────────── */
    --ut-navy:          #0A3F93;
    --ut-navy-deep:     #062D6D;
    --ut-navy-hover:    #082E6B;
    --ut-red:           #D41A22;
    --ut-red-deep:      #A31218;

    --ut-ink:           #121212;
    --ut-text:          #1A1D24;
    --ut-text-2:        #4A5160;
    --ut-muted:         #6B7280;
    --ut-faint:         #9CA3AF;

    --ut-paper:         #FFFFFF;
    --ut-cream:         #FBFAF6;
    --ut-fill:          #ECEFF5;

    --ut-hairline:      #E2E2E2;
    --ut-hairline-warm: #E3DFD3;
    --ut-line:          #D4D9E2;
    --ut-rule-dark:     #121212;

    --ut-tint-navy:     rgba(10, 63, 147, .08);
    --ut-tint-red:      rgba(212, 26, 34, .07);

    --ut-success:       #0A5E2A;
    --ut-success-tint:  #E8F6EE;
    --ut-error:         #7A1818;
    --ut-error-tint:    #FEE8E8;

    /* ── type families ─────────────────────────────────────── */
    --ut-font-display:  "Fraunces", Georgia, serif;
    --ut-font-headline: "Playfair Display", Georgia, serif;
    --ut-font-serif:    "Source Serif 4", Georgia, serif;
    --ut-font-ui:       "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --ut-font-mono:     ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

    /* ── type scale (px-locked, print-like) ────────────────── */
    --ut-fs-display:    clamp(40px, 5vw, 56px);
    --ut-fs-h1:         40px;
    --ut-fs-h2:         28px;
    --ut-fs-h3:         22px;
    --ut-fs-lead:       18px;
    --ut-fs-body:       16px;
    --ut-fs-small:      13px;
    --ut-fs-micro:      12px;
    --ut-fs-kicker:     11px;   /* always uppercase + tracked */

    --ut-track-kicker:  .14em;
    --ut-track-nav:     .12em;

    /* ── spacing (4px base) ────────────────────────────────── */
    --ut-s-1: 4px;  --ut-s-2: 8px;   --ut-s-3: 12px; --ut-s-4: 16px;
    --ut-s-5: 24px; --ut-s-6: 32px;  --ut-s-7: 48px; --ut-s-8: 64px;
    --ut-s-9: 80px;

    /* ── radii (three sizes only) ──────────────────────────── */
    --ut-r-pill:  9999px;  /* chips, badges */
    --ut-r-card:  16px;    /* app-surface cards */
    --ut-r-input: 10px;    /* inputs, small buttons */

    /* ── rules ─────────────────────────────────────────────── */
    --ut-rule-section: 2px solid var(--ut-rule-dark);
    --ut-rule-hair:    1px solid var(--ut-hairline);

    /* ── shadows (product surfaces only — news stays flat) ──── */
    --ut-shadow-card: 0 1px 2px rgba(10,16,20,.04), 0 8px 24px rgba(10,16,20,.06);
    --ut-shadow-lift: 0 2px 4px rgba(10,16,20,.06), 0 16px 36px rgba(10,16,20,.10);
    --ut-shadow-cta:  0 8px 24px rgba(10,63,147,.22);

    /* ── motion ────────────────────────────────────────────── */
    --ut-ease:     cubic-bezier(.2,.8,.2,1);
    --ut-dur-fast: 120ms;
    --ut-dur-med:  200ms;

    /* ── layout ────────────────────────────────────────────── */
    --ut-page-max:    1280px;
    --ut-content-max: 680px;   /* article measure */
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL CRISPNESS — applies everywhere, very low specificity
   ════════════════════════════════════════════════════════════════ */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* STYLEBOOK §1 enforcement (2026-06-13): the theme's global styles
       shipped body at font-weight 300 — a weight NO loaded font file
       has, so every browser synthesized a blurry faux-light for all
       inheriting text, sitewide. Real 400 is the print weight.
       !important beats the global-styles block regardless of order. */
    font-weight: 400 !important;
}

::selection { background: rgba(10, 63, 147, .14); }

:focus-visible {
    outline: 2px solid var(--ut-navy);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   BRAND PRIMITIVES — opt-in classes any surface may use
   ════════════════════════════════════════════════════════════════ */

/* Kicker: the small-caps navy section label (NYT "section head") */
.ut-kicker {
    font-family: var(--ut-font-ui);
    font-size: var(--ut-fs-kicker);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ut-track-kicker);
    color: var(--ut-navy);
}

/* Rules */
.ut-rule-dark { border: 0; border-top: var(--ut-rule-section); margin: 0; }
.ut-rule      { border: 0; border-top: var(--ut-rule-hair);    margin: 0; }

/* Buttons */
.ut-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--ut-s-2);
    font-family: var(--ut-font-ui);
    font-size: var(--ut-fs-small); font-weight: 600;
    padding: .55rem 1.1rem;
    border-radius: var(--ut-r-input);
    border: 1px solid var(--ut-navy);
    background: var(--ut-paper); color: var(--ut-navy);
    cursor: pointer; text-decoration: none;
    transition: background var(--ut-dur-fast) var(--ut-ease),
                color var(--ut-dur-fast) var(--ut-ease);
}
.ut-btn:hover { background: var(--ut-tint-navy); }
.ut-btn-primary { background: var(--ut-navy); color: #fff; }
.ut-btn-primary:hover { background: var(--ut-navy-hover); color: #fff; }
.ut-btn-danger { border-color: var(--ut-red); color: var(--ut-red); }
.ut-btn-danger:hover { background: var(--ut-red); color: #fff; }
.ut-btn[disabled] { opacity: .55; cursor: default; }

/* ── Stylebook census stragglers (2026-06-13) ─────────────────────
   Last two off-token elements found by the font/color audit. */
.usat-phone-num { font-family: var(--ut-font-ui) !important; }
footer.wp-block-template-part p { color: var(--ut-muted) !important; }

/* Badge / chip */
.ut-badge {
    display: inline-block;
    font-family: var(--ut-font-ui);
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase;
    padding: .22rem .6rem;
    border-radius: var(--ut-r-pill);
    background: var(--ut-tint-navy); color: var(--ut-navy);
}