/**
 * Patriot University — Design Tokens
 *
 * Extends ITI shared design-tokens.css with --pu-* product overrides.
 * Load AFTER shared/wordpress/ui/design-tokens.css.
 * Governed by DESIGN.md — do not add tokens without updating the contract.
 */

/* ── ITI Shared Token Definitions ─────────────────────────────────────── */
/* Normally from shared/wordpress/ui/design-tokens.css; defined inline here
   since this theme self-hosts all assets without external dependencies.    */

:root {
    /* ── Spacing Scale ────────────────────────────────────────────────── */
    --iti-space-xs:   4px;
    --iti-space-sm:   8px;
    --iti-space-md:   16px;
    --iti-space-lg:   24px;
    --iti-space-xl:   32px;
    --iti-space-2xl:  48px;
    --iti-space-3xl:  64px;

    /* ── Timing / Easing ──────────────────────────────────────────────── */
    --iti-duration-fast:    150ms;
    --iti-duration-medium:  300ms;
    --iti-duration-slow:    500ms;
    --iti-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
    --iti-ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
    --iti-ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);

    /* ── Radius ───────────────────────────────────────────────────────── */
    --iti-radius-sm:  4px;
    --iti-radius-md:  8px;
    --iti-radius-lg:  12px;

    /* ── Typography ───────────────────────────────────────────────────── */
    --iti-max-line-length: 70ch;
}

/* ── Light Mode (Default) ─────────────────────────────────────────────── */

:root {
    /* ── Primary ─────────────────────────────────────────────────────── */
    --pu-navy:        #1a3a6b;
    --pu-navy-dark:   #0f2447;
    --pu-navy-light:  #e8eef8;
    --pu-parchment:   #FBF7EE;
    --pu-ink:         #1A1A2E;

    /*
     * THE PAGE GROUND, which is NOT --pu-parchment.
     *
     * Surface A and Surface B were laid on two different off-whites — the Echo
     * KB on #FBF7EE, the House Style homepage on #EFEDE4 — so moving between
     * them shifted the paper under the reader for no editorial reason.
     *
     * This is a separate token rather than a new value for --pu-parchment
     * because parchment is doing a second job: it is the TINT on pull quotes,
     * table stripes and LIA panels. Retinting those to the ground colour would
     * erase the very distinction they exist to draw. The ground moves; the
     * tint stays where it is.
     *
     * Value is House Style's --paper (house-style.css). The two must agree.
     */
    --pu-ground:      #EFEDE4;

    /* ── Accents ─────────────────────────────────────────────────────── */
    --pu-red:         #c0392b;
    --pu-red-light:   #fdf0ee;
    --pu-green:       #27ae60;
    --pu-green-light: #edf8f2;
    --pu-gold:        #B8860B;
    --pu-gold-light:  #fdf6e3;

    /* ── Neutrals (extends --iti-*) ──────────────────────────────────── */
    --pu-gray-50:     #f8f9fa;
    --pu-gray-100:    #f1f3f4;
    --pu-gray-200:    #e2e8f0;
    --pu-gray-400:    #94a3b8;
    --pu-gray-600:    #475569;
    --pu-gray-800:    #1e293b;

    /* ── Semantic mappings to ITI tokens ──────────────────────────────── */
    --iti-primary:        var(--pu-navy);
    --iti-primary-dark:   var(--pu-navy-dark);
    --iti-primary-light:  var(--pu-navy-light);
    --iti-background:     var(--pu-parchment);
    --iti-on-background:  var(--pu-ink);
    --iti-on-surface:     var(--pu-ink);
    --iti-surface:        #FFFFFF;
    --iti-surface-2:      var(--pu-gray-50);
    --iti-surface-3:      var(--pu-gray-100);
    --iti-error:          var(--pu-red);
    --iti-error-light:    var(--pu-red-light);
    --iti-success:        var(--pu-green);
    --iti-success-light:  var(--pu-green-light);
    --iti-warning:        var(--pu-gold);
    --iti-warning-light:  var(--pu-gold-light);

    /* ── Borders ──────────────────────────────────────────────────────── */
    --iti-border:         var(--pu-gray-200);
    --iti-border-strong:  var(--pu-gray-400);

    /* ── Focus ────────────────────────────────────────────────────────── */
    --iti-shadow-focus:   0 0 0 3px rgba(26, 58, 107, 0.3);

    /* ── Typography ──────────────────────────────────────────────────── */
    --pu-font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pu-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --iti-font-body:   var(--pu-font-body);
    --iti-font-mono:   var(--pu-font-mono);

    /* ── Radius (slightly softer than ITI default) ───────────────────── */
    --pu-radius:       8px;
    --pu-radius-lg:    12px;
    --pu-radius-pill:  9999px;

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --pu-shadow:       0 2px 8px rgba(0, 0, 0, 0.08);
    --pu-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);

    /* ── Touch targets ───────────────────────────────────────────────── */
    --pu-touch:        44px;

    /*
     * Material's 48dp minimum, for pointer:coarse only. A separate token from
     * --pu-touch rather than a bump of it: Apple's 44pt and Material's 48dp are
     * different platforms' answers, and collapsing them into one number loses
     * the ability to apply each where it belongs.
     */
    --pu-touch-coarse: 48px;

    /*
     * Height of the sticky header. Exists so `scroll-padding-top` and any
     * sticky sub-header can agree with it from one place — a hard-coded 64px in
     * three files is how an in-page anchor ends up under the header on one
     * template and not another.
     */
    /* MEASURED, not intended. The sticky Editorial header (`.pu-header`) is
       95px on every page at every width — the logo box is 120x78 and the
       chrome around it makes up the rest.

       It said 64px, and nothing that consumed it was right. `safe-area.css`
       hardcoded `calc(95px + …)` with a comment explaining the token could not
       be trusted, and `tracker.css` wrote `var(--pu-header-h, 95px)` — where
       the fallback never applied, because the token WAS defined, just wrong.
       That pinned the tracker's section headers 31px underneath the header
       they were meant to sit below.

       It describes the STICKY header only. The House Style masthead is 206px
       on a phone and 156px on desktop, and is static — nothing can be obscured
       by it, so it needs no offset and is deliberately not described here. */
    --pu-header-h:     95px;

    /*
     * RESPONSIVE ALIAS — see DESIGN.md § Spacing → Responsive aliases.
     *
     * The page's edge margin, named for its ROLE. It is not a fourth spacing
     * scale: every value it takes is a point on the canonical --iti-space-*
     * grid, so DESIGN.md's "never use arbitrary pixel values" holds. The
     * precedent is --pu-ground, given its own name rather than retargeting
     * --pu-parchment, because a distinct role deserves a distinct token.
     *
     * THE RULE, and it is load-bearing: --pu-gutter may only ever resolve to a
     * var(--iti-space-*). Setting it to a literal — 20px, say — silently leaves
     * the 8pt grid while the token keeps "working", so nothing would catch it.
     * test_mobile_first.py::test_pu_gutter_only_ever_resolves_to_the_canonical_scale
     * is what catches it.
     */
    --pu-gutter:       var(--iti-space-md);   /* 16 — phone */
}

/* Tablet and desktop gutters. Shell-level, so a viewport query is correct here;
   components use container queries (spec §4.3). */
@media (min-width: 48em) { :root { --pu-gutter: var(--iti-space-lg); } }   /* 24 */
@media (min-width: 64em) { :root { --pu-gutter: var(--iti-space-xl); } }   /* 32 */

/* ── Dark Mode ────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root {
        --pu-parchment:   #1C1917;
        --pu-ink:         #E8E5E0;
        /* House Style's night ground, so the two surfaces agree in dark too —
           matching only in light would fix the homepage and leave the seam. */
        --pu-ground:      #14140F;
        --pu-navy:        #5B8BD4;
        --pu-navy-dark:   #8BAEE0;
        --pu-navy-light:  rgba(91, 139, 212, 0.15);
        --pu-red:         #E57373;
        --pu-red-light:   rgba(229, 115, 115, 0.15);
        --pu-green:       #66BB6A;
        --pu-green-light: rgba(102, 187, 106, 0.15);
        --pu-gold:        #D4A843;
        --pu-gold-light:  rgba(212, 168, 67, 0.15);

        --pu-gray-50:     #1e1e1e;
        --pu-gray-100:    #2a2a2a;
        --pu-gray-200:    #3a3a3a;
        --pu-gray-400:    #6b6b6b;
        --pu-gray-600:    #a0a0a0;
        --pu-gray-800:    #e0e0e0;

        --iti-background:     var(--pu-parchment);
        --iti-on-background:  var(--pu-ink);
        --iti-on-surface:     var(--pu-ink);
        --iti-surface:        #252220;
        --iti-surface-2:      #2E2B28;
        --iti-surface-3:      #3A3735;
        --iti-border:         #3A3735;
        --iti-border-strong:  #4A4745;
        --iti-shadow-focus:   0 0 0 3px rgba(91, 139, 212, 0.4);

        --pu-shadow:       0 2px 8px rgba(0, 0, 0, 0.3);
        --pu-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.4);
    }
}

/* ── WP Admin Dark Mode ───────────────────────────────────────────────── */

body.is-dark-theme {
    --pu-parchment:   #1d2327;
    --pu-ground:      #1d2327;
    --pu-ink:         #c3c4c7;
    --pu-navy:        #6EA8E5;
    --pu-navy-dark:   #8CBAF0;
    --pu-navy-light:  rgba(110, 168, 229, 0.15);
}