/* ==========================================================================
   PIANOMODE DESIGN SYSTEM — CANONICAL TOKENS
   --------------------------------------------------------------------------
   Centralized design tokens for the entire site. Loaded at priority 1
   (via pianomode_enqueue_design_system() in functions.php), so every
   component stylesheet can consume these variables.

   Palette (canonical 2026):
     Gold      #C59D3A
     Black     #0B0B0B
     White     #FFFFFF
   Typography: Montserrat.
   Spacing: 4px-based scale (Tailwind-aligned).
   ========================================================================== */

:root {
    /* ------------------------------------------------------------ COLOR */
    /* Canonical palette — light-gold family. Use these everywhere. */
    --pm-gold:              #D7BF81;
    --pm-gold-bright:       #E6D4A8;
    --pm-gold-dark:         #BEA86E;
    --pm-gold-deep:         #A0894A;
    --pm-gold-pale:         #F5EDD6;

    --pm-black:             #0B0B0B;
    --pm-black-soft:        #171717;
    --pm-black-muted:       #1F1F1F;
    --pm-white:             #FFFFFF;
    --pm-white-soft:        #FAFAFA;

    /* Accent — reserved for rare calls-to-action where a deeper gold reads
       better against a white background (e.g. on-white premium CTAs). */
    --pm-gold-accent:       #C59D3A;

    /* Neutrals */
    --pm-gray-50:           #FAFBFC;
    --pm-gray-100:          #F3F4F6;
    --pm-gray-200:          #E5E7EB;
    --pm-gray-300:          #D1D5DB;
    --pm-gray-400:          #9CA3AF;
    --pm-gray-500:          #6B7280;
    --pm-gray-600:          #4B5563;
    --pm-gray-700:          #374151;
    --pm-gray-800:          #1F2937;
    --pm-gray-900:          #111827;

    /* Text roles */
    --pm-text-primary:      var(--pm-black);
    --pm-text-secondary:    var(--pm-gray-600);
    --pm-text-tertiary:     var(--pm-gray-400);
    --pm-text-inverse:      var(--pm-white);
    --pm-text-gold:         var(--pm-gold);

    /* Surfaces */
    --pm-bg:                var(--pm-white);
    --pm-bg-alt:            var(--pm-gray-50);
    --pm-bg-dark:           var(--pm-black);
    --pm-bg-overlay:        rgba(11, 11, 11, .72);

    /* Semantic */
    --pm-success:           #10B981;
    --pm-error:             #DC2626;
    --pm-warning:           #F59E0B;
    --pm-info:              #3B82F6;

    /* Gold transparencies — reusable across components (base: #D7BF81) */
    --pm-gold-a08:          rgba(215, 191, 129, .08);
    --pm-gold-a15:          rgba(215, 191, 129, .15);
    --pm-gold-a25:          rgba(215, 191, 129, .25);
    --pm-gold-a35:          rgba(215, 191, 129, .35);
    --pm-gold-a50:          rgba(215, 191, 129, .50);

    /* ----------------------------------------------------- TYPOGRAPHY */
    --pm-font:              'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --pm-font-mono:         ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Fluid type scale (clamp: min, preferred, max) */
    --pm-fs-display:        clamp(2.5rem, 6vw + 1rem, 5rem);     /* Hero display */
    --pm-fs-h1:             clamp(2rem, 4vw + .8rem, 3.5rem);
    --pm-fs-h2:             clamp(1.625rem, 3vw + .6rem, 2.5rem);
    --pm-fs-h3:             clamp(1.375rem, 2vw + .5rem, 1.875rem);
    --pm-fs-h4:             clamp(1.125rem, 1.2vw + .5rem, 1.375rem);
    --pm-fs-body-lg:        clamp(1rem, .5vw + .9rem, 1.125rem);
    --pm-fs-body:           .9375rem;  /* 15px */
    --pm-fs-body-sm:        .875rem;   /* 14px */
    --pm-fs-caption:        .75rem;    /* 12px */
    --pm-fs-overline:       .6875rem;  /* 11px */

    /* Weights */
    --pm-fw-regular:        400;
    --pm-fw-medium:         500;
    --pm-fw-semibold:       600;
    --pm-fw-bold:           700;
    --pm-fw-extrabold:      800;
    --pm-fw-black:          900;

    /* Line heights */
    --pm-lh-tight:          1.1;
    --pm-lh-snug:           1.25;
    --pm-lh-normal:         1.5;
    --pm-lh-relaxed:        1.7;

    /* Tracking */
    --pm-tracking-tight:    -0.02em;
    --pm-tracking-normal:   0;
    --pm-tracking-wide:     0.04em;
    --pm-tracking-wider:    0.08em;
    --pm-tracking-widest:   0.16em;

    /* ----------------------------------------------------- SPACING (4px grid) */
    --pm-space-0:           0;
    --pm-space-1:           4px;
    --pm-space-2:           8px;
    --pm-space-3:           12px;
    --pm-space-4:           16px;
    --pm-space-5:           20px;
    --pm-space-6:           24px;
    --pm-space-8:           32px;
    --pm-space-10:          40px;
    --pm-space-12:          48px;
    --pm-space-16:          64px;
    --pm-space-20:          80px;
    --pm-space-24:          96px;
    --pm-space-32:          128px;
    --pm-space-40:          160px;

    /* ----------------------------------------------------- RADII */
    --pm-r-none:            0;
    --pm-r-xs:              2px;
    --pm-r-sm:              6px;
    --pm-r-md:              10px;
    --pm-r-lg:              14px;
    --pm-r-xl:              20px;
    --pm-r-2xl:             28px;
    --pm-r-pill:            999px;
    --pm-r-full:            9999px;

    /* ----------------------------------------------------- SHADOWS */
    --pm-shadow-xs:         0 1px 2px rgba(11, 11, 11, .06);
    --pm-shadow-sm:         0 2px 8px rgba(11, 11, 11, .08);
    --pm-shadow-md:         0 8px 24px rgba(11, 11, 11, .10);
    --pm-shadow-lg:         0 16px 48px rgba(11, 11, 11, .14);
    --pm-shadow-xl:         0 24px 64px rgba(11, 11, 11, .18);
    --pm-shadow-gold-sm:    0 4px 16px var(--pm-gold-a25);
    --pm-shadow-gold-md:    0 8px 28px var(--pm-gold-a35);
    --pm-shadow-gold-lg:    0 16px 40px var(--pm-gold-a50);
    --pm-shadow-inner:      inset 0 1px 0 rgba(255, 255, 255, .04);
    --pm-ring-gold:         0 0 0 3px var(--pm-gold-a35);

    /* ----------------------------------------------------- MOTION */
    --pm-dur-instant:       80ms;
    --pm-dur-fast:          160ms;
    --pm-dur:               240ms;
    --pm-dur-slow:          420ms;
    --pm-dur-slower:        640ms;

    --pm-ease:              cubic-bezier(.4, 0, .2, 1);          /* standard */
    --pm-ease-in:           cubic-bezier(.4, 0, 1, 1);
    --pm-ease-out:          cubic-bezier(0, 0, .2, 1);
    --pm-ease-inout:        cubic-bezier(.4, 0, .2, 1);
    --pm-ease-spring:       cubic-bezier(.34, 1.56, .64, 1);
    --pm-ease-smooth:       cubic-bezier(.22, 1, .36, 1);        /* 2026 smoothing */

    /* ----------------------------------------------------- Z-INDEX */
    --pm-z-base:            0;
    --pm-z-raised:          10;
    --pm-z-dropdown:        1000;
    --pm-z-sticky:          1010;
    --pm-z-fixed:           1020;
    --pm-z-header:          1030;
    --pm-z-newsletter:      1040;
    --pm-z-cartouche:       1060;
    --pm-z-modal-bg:        1070;
    --pm-z-modal:           1080;
    --pm-z-popover:         1090;
    --pm-z-toast:           1100;
    --pm-z-tooltip:         1110;

    /* ----------------------------------------------------- LAYOUT */
    --pm-newsletter-h:      36px;
    --pm-header-h:          68px;
    --pm-chrome-h:          calc(var(--pm-newsletter-h) + var(--pm-header-h));
    --pm-content-max:       1200px;
    --pm-content-wide:      1440px;
    --pm-content-gutter:    clamp(16px, 4vw, 32px);

    /* Cartouche — vertical rail on the right */
    --pm-cartouche-w:       56px;
    --pm-cartouche-inset:   clamp(12px, 2vw, 24px);
    --pm-cartouche-gap:     var(--pm-space-4);
}

@media (max-width: 1024px) {
    :root {
        --pm-header-h:          60px;
        --pm-newsletter-h:      32px;
        --pm-cartouche-w:       52px;
    }
}

@media (max-width: 768px) {
    :root {
        --pm-header-h:          56px;
        --pm-newsletter-h:      28px;
        --pm-cartouche-w:       48px;
        --pm-cartouche-inset:   10px;
    }
}

@media (max-width: 480px) {
    :root {
        --pm-header-h:          52px;
        --pm-cartouche-w:       44px;
    }
}

/* Respect the OS-level reduce-motion preference — cuts all non-essential
   animation down to a tiny fade so nothing gets stuck in a spinning state. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --pm-dur-fast:      1ms;
        --pm-dur:           1ms;
        --pm-dur-slow:      1ms;
        --pm-dur-slower:    1ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Global typography — applied to the document root so every page inherits.
   Page-specific CSS can still override locally without touching these rules.
   ========================================================================== */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--pm-font);
    font-size: var(--pm-fs-body);
    line-height: var(--pm-lh-normal);
    color: var(--pm-text-primary);
    background: var(--pm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Header is NON-STICKY — it sits at the top of document flow and scrolls
   away with the page. No body offset is needed. The cartouche is fixed on
   the right side and doesn't affect flow. */
body:not(.pm-no-chrome) {
    padding-top: 0;
}

/* ==========================================================================
   Utility classes — consume these in page CSS / templates.
   ========================================================================== */

/* Typography utilities */
.pm-display { font-size: var(--pm-fs-display); font-weight: var(--pm-fw-extrabold); line-height: var(--pm-lh-tight); letter-spacing: var(--pm-tracking-tight); }
.pm-h1      { font-size: var(--pm-fs-h1); font-weight: var(--pm-fw-extrabold); line-height: var(--pm-lh-tight); letter-spacing: var(--pm-tracking-tight); }
.pm-h2      { font-size: var(--pm-fs-h2); font-weight: var(--pm-fw-bold); line-height: var(--pm-lh-snug); }
.pm-h3      { font-size: var(--pm-fs-h3); font-weight: var(--pm-fw-bold); line-height: var(--pm-lh-snug); }
.pm-h4      { font-size: var(--pm-fs-h4); font-weight: var(--pm-fw-semibold); line-height: var(--pm-lh-snug); }
.pm-body    { font-size: var(--pm-fs-body); font-weight: var(--pm-fw-medium); line-height: var(--pm-lh-normal); }
.pm-body-lg { font-size: var(--pm-fs-body-lg); font-weight: var(--pm-fw-medium); line-height: var(--pm-lh-relaxed); }
.pm-body-sm { font-size: var(--pm-fs-body-sm); font-weight: var(--pm-fw-medium); line-height: var(--pm-lh-normal); }
.pm-caption { font-size: var(--pm-fs-caption); font-weight: var(--pm-fw-semibold); line-height: var(--pm-lh-snug); }
.pm-overline{ font-size: var(--pm-fs-overline); font-weight: var(--pm-fw-bold); text-transform: uppercase; letter-spacing: var(--pm-tracking-widest); }

/* Focus ring — consistent across all interactive elements */
.pm-focus-ring:focus-visible,
*:focus-visible {
    outline: none;
    box-shadow: var(--pm-ring-gold);
    border-radius: var(--pm-r-sm);
}

/* View Transitions root hook — opt-in cross-page transition for browsers that
   support it (Chrome, Edge, Safari 18+). Gracefully ignored elsewhere. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--pm-dur-slow);
    animation-timing-function: var(--pm-ease-smooth);
}

/* ==========================================================================
   Hero offset helper — page templates should apply .pm-hero-offset on the
   first section so its top padding accounts for the fixed chrome. Using a
   class keeps the math in one place.
   ========================================================================== */
.pm-hero-offset {
    padding-top: calc(var(--pm-header-h) + var(--pm-space-16));
}

/* Full-bleed heroes (concert hall, video hero) must fill the viewport.
   Since the header is now in normal document flow, no negative margin is
   needed — the hero simply starts where the header ends. */
.pm-hero-fullbleed {
    margin-top: 0;
    min-height: 100vh;
    min-height: 100svh;
}