/* ════════════════════════════════════════════════════════════════════════
   Rutriven design tokens — GENERATED FILE, DO NOT EDIT.

   Source of truth:  inc/design-tokens.php
   Regenerate:       bash tools/local/rtv sh \
                       "php /var/www/html/wp-content/themes/\
                        rutriven-storefront/inc/design-tokens.php"

   Every hex in the spine lives here and nowhere else. A component that
   needs a raw colour value is a bug in THIS file, not in the component.
   ════════════════════════════════════════════════════════════════════ */

@layer tokens {
  :root {
    /* Fields — INV-1: one continuous cream counter ────────────────────────────────────────
       --rtv-ground is the ONLY page background in the spine. The two named
       exceptions are a shade of it (sunk) and the product-image contract (tray).
       A third field tone is a review rejection (§6, "six-field pages").
       */
    --rtv-ground: #F2E9D8;      /* the counter. THE page background, everywhere */
    --rtv-ground-sunk: #EADFC9; /* recessed: inputs, totals, unselected options */
    --rtv-tray: #FFFFFF;        /* PRODUCT IMAGES ONLY — §5.3 contract, never text */

    /* Ink and structure ───────────────────────────────────────────────────────────────────
       --rtv-rule is 1.57:1 and is DECORATIVE STRUCTURE ONLY. It may never carry
       state or sit near text. --rtv-line is the 3.62:1 control border that clears
       the 3:1 non-text floor. Confusing the two is how a11y regressions enter.
       */
    --rtv-ink: #221610;   /* primary text — 14.64:1 on ground */
    --rtv-ink-2: #5B4A40; /* secondary text — 6.97:1 on ground */
    --rtv-ink-3: #6B584C; /* placeholder, disabled label — 5.57:1 on ground */
    --rtv-line: #8A7565;  /* CONTROL borders — 3.62:1, non-text floor cleared */
    --rtv-rule: #C9BBA4;  /* the shelf hairline — structure only, never state */
    --rtv-cream: #F6EFE2; /* inverted text — 10.93:1 on green-band */

    /* Green, split by JOB — the ADR 0023 accessibility contract ───────────────────────────
       Do not merge these, do not add a fourth, do not reuse one in another's job.
       brand is a FILL/STROKE and can never carry text (2.25:1 on ground).
       action is the only green that carries text. band is the inverted field.
       */
    --rtv-green-brand: #1CB375;        /* FILLS AND MARKS ONLY — ink on it is 6.51:1 */
    --rtv-green-action: #16764F;       /* THE action colour — white on it 5.62:1 */
    --rtv-green-action-hover: #115C3E; /* hover fill — white on it 8.00:1 */
    --rtv-green-band: #0E3B2C;         /* the inverted field — confirmation only */

    /* The one signal colour ───────────────────────────────────────────────────────────────
       ERRORS ONLY. Never decorative, never a badge, never a "sale" colour.
       */
    --rtv-alert: #A8331B; /* 5.52:1 on ground · white on it 6.66:1 */

    /* Foreground pairings — so no component ever writes a raw hex ─────────────────────────
       A button label is white, but it is not --rtv-tray: tray is the packshot
       contract and reusing it for text would make §5.3 unenforceable. These are
       job-named aliases, not new values, so the three-green split is intact.
       --rtv-link-on-sunk is darker BECAUSE action on sunk measures only 4.25:1.
       */
    --rtv-on-action: #FFFFFF;                          /* + label on any green fill — 5.62:1 / 8.00:1 */
    --rtv-on-alert: #FFFFFF;                           /* + label on an alert fill — 6.66:1 */
    --rtv-on-brand: var(--rtv-ink);                    /* + the cart count disc — 6.51:1 */
    --rtv-on-band: var(--rtv-cream);                   /* + text in the inverted field — 10.93:1 */
    --rtv-link: var(--rtv-green-action);               /* + link text on ground/tray — 4.66:1 / 5.62:1 */
    --rtv-link-on-sunk: var(--rtv-green-action-hover); /* + link text on sunk — 6.06:1 (see §3.1 defect) */
    --rtv-backdrop: rgba(34, 22, 16, .32);             /* + drawer/sheet backdrop (§2.9) */

    /* Approved F10 presentation palette ───────────────────────────────────────────────────
       Exact presentation-source tones. The job-oriented commerce tokens above remain unchanged.
       */
    --rtv-f10-tone-000000: #000000; /* black artwork and shadow base */
    --rtv-f10-tone-140a02: #140A02; /* deep gold shadow */
    --rtv-f10-tone-150b07: #150B07; /* deepest cocoa */
    --rtv-f10-tone-170d09: #170D09; /* deep cocoa shadow */
    --rtv-f10-tone-17453d: #17453D; /* deep teal field */
    --rtv-f10-tone-1a5c33: #1A5C33; /* deep leaf field */
    --rtv-f10-tone-062211: #062211; /* dark leaf shadow */
    --rtv-f10-tone-23130e: #23130E; /* dark fascia */
    --rtv-f10-tone-2e1c15: #2E1C15; /* cocoa ink */
    --rtv-f10-tone-341c04: #341C04; /* gold shadow base */
    --rtv-f10-tone-3c2406: #3C2406; /* gold ink base */
    --rtv-f10-tone-3c9be0: #3C9BE0; /* sky accent */
    --rtv-f10-tone-4a382f: #4A382F; /* muted cocoa */
    --rtv-f10-tone-56443b: #56443B; /* muted cocoa */
    --rtv-f10-tone-57443b: #57443B; /* muted cocoa */
    --rtv-f10-tone-5a473f: #5A473F; /* muted cocoa */
    --rtv-f10-tone-5c4008: #5C4008; /* dark gold ink */
    --rtv-f10-tone-6b564b: #6B564B; /* quiet cocoa */
    --rtv-f10-tone-6e5b52: #6E5B52; /* quiet cocoa */
    --rtv-f10-tone-8cc7de: #8CC7DE; /* blue family field */
    --rtv-f10-tone-9cc98c: #9CC98C; /* leaf family field */
    --rtv-f10-tone-a32e0c: #A32E0C; /* deep coral ink */
    --rtv-f10-tone-b3a392: #B3A392; /* quiet rule */
    --rtv-f10-tone-b83a11: #B83A11; /* coral text */
    --rtv-f10-tone-bfe3dc: #BFE3DC; /* mint family field */
    --rtv-f10-tone-cdbfae: #CDBFAE; /* cream rule */
    --rtv-f10-tone-d9d0c2: #D9D0C2; /* cream rule */
    --rtv-f10-tone-e7d3b2: #E7D3B2; /* warm rule */
    --rtv-f10-tone-f0996b: #F0996B; /* coral family field */
    --rtv-f10-tone-f2622e: #F2622E; /* coral graphic */
    --rtv-f10-tone-f4ebdb: #F4EBDB; /* homepage canvas */
    --rtv-f10-tone-f5c842: #F5C842; /* gold family field */
    --rtv-f10-tone-f6eee2: #F6EEE2; /* cream overlay base */
    --rtv-f10-tone-f8f1e4: #F8F1E4; /* quiet cream field */
    --rtv-f10-tone-ffd23f: #FFD23F; /* approved yellow action field */
    --rtv-f10-tone-fffcf6: #FFFCF6; /* soft white panel */

    /* Type — the face tells you WHO is speaking, not how loud ─────────────────────────────
       Anton is Rutriven's own voice and is rationed: <=1 per viewport, <=2 per
       template, never on supplier data and never on a control. Gabarito is the
       merchandise. Rubik is the machine. No fifth face may be added.
       */
    --rtv-font-voice: 'Anton', system-ui, sans-serif;                 /* Rutriven speaking */
    --rtv-font-goods: 'Gabarito', system-ui, sans-serif;              /* the merchandise */
    --rtv-font-system: 'Rubik', system-ui, -apple-system, sans-serif; /* the machine */

    /* Type scale — ratio ~1.16 through the body range, then a jump ────────────────────────
       No font-size outside this scale ships.
       */
    --t-11: 11px; /* meta lane */
    --t-12: 12px;
    --t-13: 13px;
    --t-14: 14px;
    --t-15: 15px; /* body / product name */
    --t-17: 17px;
    --t-19: 19px; /* card price */
    --t-22: 22px; /* wordmark */
    --t-27: 27px;
    --t-34: 34px;
    --t-40: 40px; /* PDP price >=1024 */
    --t-44: 44px; /* confirmation h1 */
    --t-54: 54px;

    /* Leading — the Hungarian diacritic collision floor ───────────────────────────────────
       This is a property of the language, not a taste setting. Measured with
       Playwright over the shipped woff2 across the full Hungarian uppercase
       alphabet. Any heading that can wrap and is set below its face's floor
       fuses the dots of O with the line above. F10 shipped 0.98 and did exactly that.
       */
    --lh-voice: 1.24;       /* Anton uppercase (floor 1.19) */
    --lh-voice-mixed: 1.27; /* + Anton mixed case (floor 1.225) — §3.3 table */
    --lh-goods: 1.22;       /* Gabarito mixed — product names (floor 1.16) */
    --lh-goods-caps: 1.06;  /* + Gabarito uppercase (floor 1.01) — §3.3 table */
    --lh-tight: 1.17;       /* Rubik headings and dense rows (floor 1.12) */
    --lh-prose: 1.55;       /* Rubik body copy */

    /* Spacing — 4px base, nine steps ──────────────────────────────────────────────────────
       No value outside this scale ships.
       */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* Radii, borders, shadow — the condemned kit is absent by construction ────────────────
       TWO radii. There is no third and there is no 999px pill (banned, §6).
       ONE shadow, for genuinely floating layers only — cards, buttons, trays and
       inputs have none. There is no offset shadow and no 2px outline-everything.
       */
    --r-1: 4px;                                              /* controls: buttons, fields, chips, stepper */
    --r-2: 10px;                                             /* surfaces: trays, panels, drawers, sheets */
    --bw-control: 1px;                                       /* --rtv-line — an edge you can act on */
    --bw-rule: 1px;                                          /* --rtv-rule — the shelf. Structure only */
    --bw-emph: 2px;                                          /* --rtv-ink — selected option, final totals rule */
    --shadow-drawer: 0 12px 32px -8px rgba(34, 22, 16, .28); /* floating layers ONLY */

    /* Motion — nothing in the purchase path may require it ────────────────────────────────
       Still-frame sufficiency (ADR 0024). Motion may confirm; it may never be required.
       */
    --dur-1: 120ms;                               /* control state change */
    --dur-2: 200ms;                               /* drawer, sheet, panel */
    --dur-3: 320ms;                               /* stage / role change */
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-stage: cubic-bezier(.32, .72, .24, 1);

    /* Layout and control geometry ─────────────────────────────────────────────────────────
       44px is the tap floor every interactive cell in the spine is measured
       against; 48px is the comfortable control height on PDP and checkout.
       */
    --shell: 1200px;       /* content shell */
    --shell-wide: 1400px;  /* archive grid only */
    --gutter: 24px;        /* 16px at <=640 — see the media block below */
    --bar-h: 56px;         /* mobile bars */
    --tap-min: 44px;       /* + minimum interactive cell */
    --ctl-h: 48px;         /* + PDP / checkout control height */
    --ctl-h-dense: 44px;   /* + card / dense control height */
    --pack-occupancy: .72; /* ink height / tray height (§5.2) — ONE number */
  }

  /* (max-width: 640px)
     The gutter narrows on small viewports; nothing else is breakpoint-dependent.
     */
  @media (max-width: 640px) {
    :root {
      --gutter: 16px;
    }
  }

  /* (prefers-reduced-motion: reduce)
     Reduced motion resolves to opacity only — no transform, translate or scale.
     Every loading rule renders static at 100%.
     */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-1: 1ms;
      --dur-2: 1ms;
      --dur-3: 1ms;
    }
  }
}