/* ═══════════════════════════════════════════════════════════════════════════
   cri-tokens.css — the ONE token file for cri-one.com
   Replaces cri-palette.css + cri-type.css (both versions) everywhere.

   Values are Magento Luma's own, so the static pages, the store and the
   channel all resolve the same names to the same colours. Nothing here
   restyles Luma — it only names Luma's values so our own components can
   reference them.

   DELIBERATELY DROPPED from the files this replaces:
     * auto-cycled rainbow <h2> colours   — not Luma, and fought the store
     * the custom type scale (--cri-fs-*) — Luma sets its own sizes
     * .cri-row / .cri-col / .cri-card    — measured: used on 0 pages
   KEPT because pages actually use them:
     * every --cri-* token name (17 pages reference var(--cri-*))
     * .cri-badge + accents (4-6 pages, plus the channel widgets)
     * .cri-container (2 pages)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Neutrals: Luma's values, one name each ─────────────────────────
       These are the canonical spellings. Legacy aliases are at the bottom
       so older markup keeps working while pages migrate. */
    --cri-ink:        #333333;   /* Luma body text          */
    --cri-paper:      #ffffff;
    --cri-line:       #cccccc;   /* Luma border             */
    --cri-muted:      #575757;   /* Luma secondary text     */
    --cri-tint:       #f4f4f4;   /* Luma .page-footer       */
    --cri-panel:      #f0f0f0;   /* Luma .nav-sections      */

    /* ── Luma's own accents ─────────────────────────────────────────── */
    --cri-link:          #006bb4;
    --cri-primary:       #1979c3;
    --cri-primary-hover: #006bb4;

    /* ── Type: Luma's stack. Overrides the Arial token that
           cri-one-store-match.css sets, because this file loads after it. */
    --cri-font:      'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cri-font-form: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cri-mono:      Menlo, Monaco, Consolas, 'Courier New', monospace;

    /* ── Accent family: kept, still referenced by content and widgets.
           Semantics (unchanged): sage=music, terra=auctions,
           mustard=products, dusty=patents, plum=art, slate=articles,
           olive=announcements, taupe=bookmarks. ─────────────────────── */
    --cri-sage:       #7a8c6f;   --cri-sage-bg:    #eef1eb;
    --cri-terra:      #b4592e;   --cri-terra-bg:   #f7e9e0;
    --cri-mustard:    #b8933a;   --cri-mustard-bg: #f6efd6;
    --cri-dusty:      #b48884;   --cri-dusty-bg:   #f5e8e6;
    --cri-plum:       #6b4a5f;   --cri-plum-bg:    #ede4e8;
    --cri-slate:      #5a6b7a;   --cri-slate-bg:   #e8ecf0;
    --cri-olive:      #7a7248;   --cri-olive-bg:   #efece0;
    --cri-taupe:      #8a7967;   --cri-taupe-bg:   #ede8e0;

    /* ── Legacy aliases ──────────────────────────────────────────────
       Same concept, older spelling. Point at the canonical token so
       nothing breaks while markup migrates; delete once unreferenced. */
    --cri-muted-fg:   var(--cri-muted);
    --cri-ink-soft:   var(--cri-muted);
    --cri-border:     var(--cri-line);
    --cri-line-soft:  var(--cri-line);
    --cri-paper-warm: var(--cri-tint);
    --ink:            var(--cri-ink);
    --paper:          var(--cri-paper);
    --line:           var(--cri-line);
    --muted:          var(--cri-muted);
    --tint:           var(--cri-tint);
}

/* ── Badge: one definition, site-wide ───────────────────────────────── */
.cri-badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid var(--cri-line);
    color: var(--cri-muted);
    background: var(--cri-paper);
}
.cri-badge-sage    { color: var(--cri-sage);    background: var(--cri-sage-bg);    border-color: var(--cri-sage); }
.cri-badge-terra   { color: var(--cri-terra);   background: var(--cri-terra-bg);   border-color: var(--cri-terra); }
.cri-badge-mustard { color: var(--cri-mustard); background: var(--cri-mustard-bg); border-color: var(--cri-mustard); }
.cri-badge-dusty   { color: var(--cri-dusty);   background: var(--cri-dusty-bg);   border-color: var(--cri-dusty); }
.cri-badge-plum    { color: var(--cri-plum);    background: var(--cri-plum-bg);    border-color: var(--cri-plum); }
.cri-badge-slate   { color: var(--cri-slate);   background: var(--cri-slate-bg);   border-color: var(--cri-slate); }
.cri-badge-olive   { color: var(--cri-olive);   background: var(--cri-olive-bg);   border-color: var(--cri-olive); }
.cri-badge-taupe   { color: var(--cri-taupe);   background: var(--cri-taupe-bg);   border-color: var(--cri-taupe); }

/* ── Container: the one wrapper name. `wrap`, `wrapper`, `inner` and
       `container` all mean this; migrate markup onto it over time. ──── */
.cri-container {
    width: 100%;
    max-width: 1280px;      /* Luma's own page width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
.cri-container-sm { max-width: 720px; }
.cri-container-md { max-width: 960px; }
.cri-container-lg { max-width: 1200px; }
.cri-container-xl { max-width: 1400px; }