/* Design tokens for unlockparadise.ph.
 *
 * Loaded before every other stylesheet (handle upd-tokens) by whichever theme
 * is active, and read by the core plugin's component styles. Three blocks:
 *
 *   1. Primitives generated by tools/tokens/inventory.py: every colour, font
 *      size and radius that appears at least twice in the stylesheets, named
 *      by hue and lightness or by value. Exact values only; near duplicates
 *      stay separate until the redesign decides which one wins.
 *   2. Brand and chrome tokens, moved here from the child theme's style.css.
 *   3. Surfaces: the ink and line tokens a component reads so that the same
 *      markup keeps its contrast on navy, sand or paper.
 */

/* ---- 1. Primitives (generated, do not hand edit) ---- */
:root {
  /* colours */
  --upd-c-blue-05bbb: #f5f7fa;
  --upd-c-blue-10b: #dfe7ec;
  --upd-c-blue-10bb: #dfe9ee;
  --upd-c-blue-10bbb: #e2e8f0;
  --upd-c-blue-10bbbb: #e5e7eb;
  --upd-c-blue-15: #cbd5e1;
  --upd-c-blue-20b: #c8d2d8;
  --upd-c-blue-35: #94a3b8;
  --upd-c-blue-40b: #8ea3ad;
  --upd-c-blue-50: #6f8792;
  --upd-c-blue-85: #16232b;
  --upd-c-blue-85b: #16242c;
  --upd-c-blue-85bb: #1a2a3a;
  --upd-c-blue-85bbb: #1b2c38;
  --upd-c-blue-90b: #0c1822;
  --upd-c-blue-90bbb: #0f1a1f;
  --upd-c-blue-90bbbb: #11202a;
  --upd-c-ink-00: #ffffff;
  --upd-c-ink-10: #e7ecec;
  --upd-c-ink-100: #000000;
  --upd-c-ink-10b: #e8e8e8;
  --upd-c-ink-20: #c7d2cd;
  --upd-c-ink-60: #5f6c75;
  --upd-c-orange-20: #e8d5b7;
  --upd-c-orange-35: #e6bb5c;
  --upd-c-orange-45: #d4a344;
  --upd-c-orange-85: #3a2a06;
  --upd-c-red-20b: #f0b3a8;
  --upd-c-teal-40: #8ba4a8;
  --upd-c-teal-75: #2f4a44;
  --upd-c-teal-90b: #06342c;
  /* font sizes */
  --upd-fs-0-85rem: 0.85rem;
  --upd-fs-1-0625rem: 1.0625rem;
  --upd-fs-1-125rem: 1.125rem;
  --upd-fs-1-5rem: 1.5rem;
  --upd-fs-1-9rem: 1.9rem;
  --upd-fs-10px: 10px;
  --upd-fs-11px: 11px;
  --upd-fs-12px: 12px;
  --upd-fs-13px: 13px;
  --upd-fs-14px: 14px;
  --upd-fs-15px: 15px;
  --upd-fs-16px: 16px;
  --upd-fs-18px: 18px;
  --upd-fs-1rem: 1rem;
  --upd-fs-2-75rem: 2.75rem;
  --upd-fs-2rem: 2rem;
  --upd-fs-6875rem: .6875rem;
  --upd-fs-72rem: .72rem;
  --upd-fs-75rem: .75rem;
  --upd-fs-8125rem: .8125rem;
  --upd-fs-82rem: .82rem;
  --upd-fs-85rem: .85rem;
  --upd-fs-875rem: .875rem;
  --upd-fs-8rem: .8rem;
  --upd-fs-92rem: .92rem;
  --upd-fs-9375rem: .9375rem;
  --upd-fs-95rem: .95rem;
  --upd-fs-9rem: .9rem;
  /* radii */
  --upd-r-10px: 10px;
  --upd-r-12px: 12px;
  --upd-r-14px: 14px;
  --upd-r-16px: 16px;
  --upd-r-18px: 18px;
  --upd-r-50: 50%;
  --upd-r-6px: 6px;
  --upd-r-8px: 8px;
  --upd-r-999px: 999px;
  --upd-r-9px: 9px;
}

/* ---- 2. Brand and chrome ---- */
:root {
    /* ---------------------------------------------------------------- teal
     * One ramp for every teal in the UI. The two token names are one character
     * apart and used to hold different colours (--up-teal #7BC4A8 vs --upd-teal
     * #1F9E8A). Use the SEMANTIC names below in components, not the ramp steps,
     * and never a raw hex.
     */
    --upd-teal-100: #b6ebdf; /* lightest: emphasis text on the dark navy */
    --upd-teal-200: #86d8c8; /* accent text, icons, links on the dark navy */
    --upd-teal-400: #7bc4a8; /* solid interactive fill + focus ring          */
    --upd-teal-500: #6bb89a; /* pressed/hover shade of the fill              */
    --upd-teal-600: #1f9e8a; /* deep: accent on light or glassy surfaces */

    /* Semantic aliases. These are what components should reference. */
    --upd-accent:      var(--upd-teal-200);
    --upd-accent-soft: var(--upd-teal-100);
    --upd-fill:        var(--upd-teal-400);
    --upd-fill-hover:  var(--upd-teal-500);
    --upd-teal:        var(--upd-teal-600);

    /* Deprecated: --up-teal predates the ramp and is still referenced in
       reviews.css, single-place.css and below. Same value as --upd-fill;
       prefer --upd-fill in new work. */
    --up-teal: var(--upd-teal-400);

    --up-dark-slate: #4A6670;
    --up-sage: #6B7F73;
    --up-sand: #F0CFA0;
    --up-terracotta: #CC9966;
    --up-dark-forest: #2C3E3E;
    /* VIP accent, bright amber gold. Reuse for ALL VIP-related UI. */
    --upd-vip-gold: #d4a344;
    --upd-vip-gold-dark: #b8862f; /* hover/active shade */

    /* -------------------------------------------------------------- chrome
     * Site chrome: the header bar and the footer. Sits one step darker than
     * the page navy (#11202a) so both read as frame rather than as content.
     *
     * Declared once here because the same value is consumed from two very
     * different places: the header rules further down this file, and Astra's
     * `hbb-footer-bg-obj-responsive` Customizer setting, which is deliberately
     * set to `var(--upd-chrome)` rather than a literal hex so that this stays
     * the single definition. (Astra accepts a CSS var in that field; it
     * shipped holding `var(--ast-global-color-2)`.) Change it here and the
     * header and footer move together. */
    --upd-chrome: #0b1620;

    /* The header's two dressings, both cut from the chrome colour. The shade
     * sits behind the logo at the top of a page and fades out below it. The
     * glass is the bar itself once the page is scrolled: a tint over a blur of
     * whatever is passing underneath. The rgb() values are the same colours for
     * browsers without color-mix(); a var() declaration would discard a plain
     * fallback line, so the fallback lives in the variable. */
    --upd-shade-top: rgba(11, 22, 32, .55);
    --upd-glass: rgba(11, 22, 32, .5);
    --upd-glass-filter: blur(10px) saturate(140%);
}
@supports (background-color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --upd-shade-top: color-mix(in srgb, var(--upd-chrome) 55%, transparent);
        --upd-glass: color-mix(in srgb, var(--upd-chrome) 50%, transparent);
    }
}

/* ---- 3. Surfaces ----
 * Values are the ones components declare for themselves today (legal,
 * membership pages, account and the checkout receipt); the surface class only
 * moves that declaration to a wrapper. Sand and paper have no soft ink yet:
 * nothing dark-on-light uses one, so it stays undefined there rather than
 * guessed. Sand borrows the receipt's muted ink and line. */
:root, .upd-surface--navy {
  --upd-surface: #11202a;
  --upd-ink: #f5f7fa;
  --upd-ink-soft: #c8d2d8;
  --upd-ink-mute: #8ea3ad;
  --upd-line: rgba(255, 255, 255, .12);
}
.upd-surface--sand {
  --upd-surface: #e9e2d4;
  --upd-ink: #11202a;
  --upd-ink-mute: #5f6f77;
  --upd-line: rgba(17, 32, 42, .18);
}
.upd-surface--paper {
  --upd-surface: #fbfaf7;
  --upd-ink: #11202a;
  --upd-ink-mute: #5f6f77;
  --upd-line: rgba(17, 32, 42, .18);
}