/* TISSA — CSS custom properties
 * Source of truth: tissa-web-v2/assets/css/tokens.css
 * Ported to WP theme: 2026-05-19 (Phase 1 · alpha12)
 * --tissa-warning kept at production canon #b8862f (v2 value #b75000 is NOT used here)
 */
:root {

    /* ---- Core palette ---- */
    --tissa-white:        #ffffff;
    --tissa-offwhite:     #fbf9f5;
    --tissa-carbon:       #252628;
    --tissa-carbon-light: #3a3a3d;
    --tissa-carbon-muted: #6b6b6f;
    --tissa-border:       #e5e5e5;
    --tissa-border-dark:  #d0d0d0;
    --tissa-accent:       #252628;
    --tissa-green:        #16a34a;
    --tissa-red:          #dc2626;
    /* WARNING: production canon. v2 mock uses #b75000 — intentionally NOT synced. */
    --tissa-warning:      #b8862f;
    --tissa-saffron:      #d97706;

    /* ---- Dashboard-only tokens (v1-production · not in v2) ---- */
    --tissa-surface-2:    #f0ede6;
    --tissa-surface-3:    #eae6dc;

    /* ---- Semantic aliases (v2 component system) ---- */
    --tissa-ink:      var(--tissa-carbon);
    --tissa-paper:    var(--tissa-offwhite);
    --tissa-bone:     var(--tissa-white);
    --tissa-seal:     var(--tissa-carbon);
    --tissa-graphite: var(--tissa-carbon-muted);
    --tissa-line:     var(--tissa-border);
    --tissa-success:  var(--tissa-green);

    /* ---- Font families ---- */
    --ff-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --ff-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
    --ff-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ff-script:  "Allura", "Pinyon Script", "Sacramento", cursive;
    --ff-ui:      var(--ff-body);

    /* Legacy aliases — keep for Tailwind + existing CSS compatibility */
    --font-playfair:      var(--ff-display);
    --font-source-serif:  var(--ff-body);
    --font-mono:          var(--ff-mono);
    --default-font-family:      var(--ff-body);
    --default-mono-font-family: var(--ff-mono);

    /* ---- Type scale ---- */
    --fs-display-xl: clamp(56px, 8vw, 96px);
    --fs-h1:         clamp(40px, 6vw, 72px);
    --fs-h2:         clamp(28px, 4vw, 48px);
    --fs-h3:         clamp(22px, 2.6vw, 32px);
    --fs-h4:         clamp(18px, 1.8vw, 24px);
    --fs-body-lg:    20px;
    --fs-body:       16px;
    --fs-small:      14px;
    --fs-eyebrow:    12px;
    --fs-mono:       14px;

    /* ---- Line heights ---- */
    --lh-display: 1.05;
    --lh-heading: 1.15;
    --lh-body:    1.6;

    /* ---- Spacing scale (8px base) ---- */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 112px;
    --space-8: 160px;

    /* ---- Container widths ---- */
    --container-max:    1280px;
    --container-wide:   1440px;
    --container-narrow: 880px;
    --container-text:   720px;
    --container-pad-d:  80px;
    --container-pad-t:  48px;
    --container-pad-m:  24px;

    /* ---- Structural tokens ---- */
    --radius:      4px;
    --radius-lg:   8px;
    --border-thin: 1px solid var(--tissa-border);
    --border-ink:  1px solid var(--tissa-carbon);
    --shadow-soft: 0 1px 2px rgba(37, 38, 40, 0.04), 0 8px 24px rgba(37, 38, 40, 0.06);
    --transition:  180ms cubic-bezier(0.2, 0, 0, 1);
}

::selection {
    background: var(--tissa-carbon);
    color: var(--tissa-white);
}

/* Base body defaults */
html, body {
    font-family: var(--ff-body);
    font-feature-settings: normal;
    background: var(--tissa-offwhite);
    color: var(--tissa-carbon);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WordPress admin bar offset (so fixed header doesn't hide behind it) */
body.admin-bar header.fixed {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar header.fixed {
        top: 46px;
    }
}

/* WP wraps raw HTML inside <p> in places — kill that default margin for
 * imported pages so sections don't get extra spacing. */
.post-type-page .entry-content > p:empty { display: none; }

/* Hide WP-added image captions on imported content */
.wp-caption { display: contents; }

/* Defensive: ensure imported CSS vars default correctly */
body { overflow-x: hidden; }