/* ==========================================================================
   ProtoCentral — Design Tokens v3.0 (Signal Amber direction)
   Locked: April 2026

   Brand blue (logo circle):  #2C6E84
   Brand grey (wordmark):     #7A7E80
   Bold accent (Signal Amber): #F59E0B

   Type stack:
     - Display: Saira (Bank-Gothic-alike, uppercased H1/H2)
     - UI sans: Futura PT → Jost (nav, labels, buttons, H3-H6)
     - Body:    Montserrat (paragraphs, descriptions)
     - Mono:    JetBrains Mono (SKUs, code)
     - Icons:   Material Symbols Outlined (variable font)

   This file is the single source of truth for all design tokens.
   The full v3.0 system was authored in references/colors_and_type.css and
   re-keyed here for theme use. --md-sys-* aliases were dropped in v3.0;
   all CSS now uses --color-*, --type-*, --radius-*, --elevation-*,
   --easing-*, --duration-*, and --space-* tokens directly.
   ========================================================================== */

:root {
    /* === BRAND (locked from logo) === */
    --pc-brand-blue:    #2C6E84;
    --pc-brand-blue-dk: #1F4E5E;
    --pc-brand-blue-lt: #C9DEE6;
    --pc-brand-grey:    #7A7E80;

    /* === ACCENT (Signal Amber — high-CTA, NEW chips, focus, cart badge) === */
    --pc-accent:        #F59E0B;
    --pc-accent-dk:     #B45309;
    --pc-accent-lt:     #FEF3C7;
    --pc-accent-on:     #1F1300;

    /* =====================================================================
       COLOR — PRIMARY (alias to brand blue)
       ===================================================================== */
    --color-primary:               #2C6E84;
    --color-primary-dark:          #1F4E5E;
    --color-primary-container:     #C9DEE6;
    --color-on-primary:            #FFFFFF;
    --color-on-primary-container:  #0A2933;

    /* =====================================================================
       COLOR — SECONDARY (Signal Amber)
       ===================================================================== */
    --color-secondary:               #B45309;
    --color-secondary-container:     #FEF3C7;
    --color-on-secondary:            #FFFFFF;
    --color-on-secondary-container:  #1F1300;

    /* =====================================================================
       COLOR — TERTIARY (deep teal-violet, sparing)
       ===================================================================== */
    --color-tertiary:               #4338CA;
    --color-tertiary-container:     #E0E7FF;
    --color-on-tertiary:            #FFFFFF;
    --color-on-tertiary-container:  #161054;

    /* =====================================================================
       COLOR — NEUTRALS (warm grey, anchored to logo wordmark #7A7E80)
       ===================================================================== */
    --pc-n-1: #F7F8F9;
    --pc-n-2: #E7EAEC;
    --pc-n-3: #B7BDC0;
    --pc-n-4: #5A6266;
    --pc-n-5: #1A1F22;

    /* =====================================================================
       COLOR — SURFACE (light)
       Surface ramp: #FAFBFC → #FFFFFF → #F7F8F9 → #F1F3F4 → #E7EAEC → #DDE1E3
       ===================================================================== */
    --color-bg:                        #FAFBFC;
    --color-surface:                   #FFFFFF;
    --color-surface-container-lowest:  #FFFFFF;
    --color-surface-container-low:     #F7F8F9;
    --color-surface-container:         #F1F3F4;
    --color-surface-container-high:    #E7EAEC;
    --color-surface-container-highest: #DDE1E3;
    --color-surface-variant:           #E7EAEC;
    --color-inverse-surface:           #1A1F22;
    --color-inverse-on-surface:        #F7F8F9;
    --color-inverse-primary:           #8FC6D9;

    /* =====================================================================
       COLOR — FOREGROUND
       ===================================================================== */
    --fg1:        #1A1F22;
    --fg2:        #3F484B;
    --fg3:        #5A6266;
    --fg-on-dark: #F7F8F9;

    /* =====================================================================
       COLOR — OUTLINE
       ===================================================================== */
    --color-outline:         #7A8388;
    --color-outline-variant: #B7BDC0;

    /* =====================================================================
       COLOR — SEMANTIC
       ===================================================================== */
    --color-success:           #16A34A;
    --color-success-container: #DCFCE7;
    --color-on-success:        #FFFFFF;
    --color-warning:           #EA580C;
    --color-warning-container: #FFEDD5;
    --color-on-warning:        #FFFFFF;
    --color-info:              #2563EB;
    --color-info-container:    #DBEAFE;
    --color-on-info:           #FFFFFF;
    --color-error:             #DC2626;
    --color-error-container:   #FEE2E2;
    --color-on-error:          #FFFFFF;
    --color-on-error-container:#410002;

    /* === SCRIM / SHADOW === */
    --color-scrim:  #000000;
    --color-shadow: #000000;

    /* =====================================================================
       TYPE — FAMILIES
       Display: Saira (Google) — Bank-Gothic-alike, uppercased
       UI sans: Futura PT (macOS) → Jost (Google) fallback
       Body:    Montserrat (Google)
       Mono:    JetBrains Mono (Google)
       ===================================================================== */
    --font-display: "Saira", "Bank Gothic", "Eurostile Extended", "Futura PT", Futura, Jost, sans-serif;
    --font-sans:    "Futura PT", Futura, "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body:    "Montserrat", "Futura PT", Futura, "Jost", -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", "Fira Code", monospace;

    /* =====================================================================
       TYPE — SCALE
       ===================================================================== */
    --type-display-lg:  700 57px/1.05 var(--font-display);
    --type-display-md:  700 45px/1.08 var(--font-display);
    --type-display-sm:  700 36px/1.10 var(--font-display);
    --type-headline-lg: 600 32px/1.18 var(--font-sans);
    --type-headline-md: 600 28px/1.22 var(--font-sans);
    --type-headline-sm: 600 24px/1.30 var(--font-sans);
    --type-title-lg:    600 22px/1.30 var(--font-sans);
    --type-title-md:    600 16px/1.40 var(--font-sans);
    --type-title-sm:    600 14px/1.40 var(--font-sans);
    --type-body-lg:     400 16px/1.55 var(--font-body);
    --type-body-md:     400 14px/1.55 var(--font-body);
    --type-body-sm:     400 12px/1.50 var(--font-body);
    --type-label-lg:    600 14px/1.40 var(--font-sans);
    --type-label-md:    600 12px/1.40 var(--font-sans);
    --type-label-sm:    700 11px/1.40 var(--font-sans);

    /* =====================================================================
       SHAPE (corner radius)
       ===================================================================== */
    --radius-none: 0;
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* =====================================================================
       ELEVATION (M3 two-shadow system)
       ===================================================================== */
    --elevation-0: none;
    --elevation-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
    --elevation-2: 0 2px 4px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.06);
    --elevation-3: 0 4px 8px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.08);
    --elevation-4: 0 8px 16px rgba(0,0,0,.12), 0 16px 24px rgba(0,0,0,.10);
    --elevation-5: 0 16px 24px rgba(0,0,0,.14), 0 24px 32px rgba(0,0,0,.12);

    /* =====================================================================
       SPACING (4-px grid)
       ===================================================================== */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* =====================================================================
       MOTION
       ===================================================================== */
    --easing-standard:   cubic-bezier(0.2, 0, 0, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0, 1);
    --easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --duration-short:  150ms;
    --duration-medium: 300ms;
    --duration-long:   500ms;

    /* =====================================================================
       STATE LAYER OPACITY
       ===================================================================== */
    --state-hover:   0.08;
    --state-focus:   0.10;
    --state-pressed: 0.10;
    --state-dragged: 0.16;

    /* =====================================================================
       LAYOUT
       v3.5 — centered, fixed-width content (~1280px) like SparkFun /
       Adafruit / Crowd Supply. Section BACKGROUNDS still go full-bleed
       (gradients, hero overlays — applied to the outer <section>), but
       inner content wrappers clamp to --container-max and centre.
       v3.3's "full screen width" was too wide on big monitors and made
       line lengths uncomfortably long.

       --content-max stays at 1200px for narrow reading contexts (tab body
       copy, doc pages, blog posts) where 80ch is the readability target.
       ===================================================================== */
    --container-max:   1280px;
    --content-max:     1200px;
    --page-padding-x:  32px;

    /* =====================================================================
       Z-INDEX SCALE
       ===================================================================== */
    --pc-z-tabs:     90;
    --pc-z-navbar:   100;
    --pc-z-dropdown: 200;
    --pc-z-modal:    300;

    /* =====================================================================
       LEGACY ALIASES (kept for any third-party CSS still using --pc-*)
       Avoid using these in new code.
       ===================================================================== */
    --pc-font-family: var(--font-sans);
    --pc-font-mono:   var(--font-mono);

    --pc-radius:      var(--radius-sm);
    --pc-radius-lg:   var(--radius-md);
    --pc-radius-full: var(--radius-full);

    --pc-shadow-sm: var(--elevation-1);
    --pc-shadow-md: var(--elevation-2);
    --pc-shadow-lg: var(--elevation-4);

    --pc-transition: var(--duration-medium) var(--easing-standard);

    --pc-space-xs:  var(--space-xs);
    --pc-space-sm:  var(--space-sm);
    --pc-space-md:  var(--space-md);
    --pc-space-lg:  var(--space-lg);
    --pc-space-xl:  var(--space-xl);
    --pc-space-2xl: var(--space-2xl);
    --pc-space-3xl: var(--space-3xl);

    --pc-container-max: var(--container-max);
}

/* =========================================================================
   DARK MODE
   Toggle by setting data-theme="dark" on <html> (or .pc-dark on body).
   Brand pairs, semantic colors, and surfaces all re-tint.
   ========================================================================= */
:root[data-theme="dark"], .pc-dark {
    --color-bg:                        #0E1418;
    --color-surface:                   #131A1E;
    --color-surface-container-lowest:  #0E1418;
    --color-surface-container-low:     #161D22;
    --color-surface-container:         #1B232A;
    --color-surface-container-high:    #232C33;
    --color-surface-container-highest: #2B353D;
    --color-surface-variant:           #2B353D;
    --color-inverse-surface:           #F7F8F9;
    --color-inverse-on-surface:        #1A1F22;

    --color-primary:               #6FB3CC;
    --color-primary-dark:          #2C6E84;
    --color-primary-container:     #1F4E5E;
    --color-on-primary:            #002935;
    --color-on-primary-container:  #C9DEE6;

    --color-secondary:               #FBBF24;
    --color-secondary-container:     #4A2A03;
    --color-on-secondary:            #1F1300;
    --color-on-secondary-container:  #FEF3C7;

    --color-tertiary:               #A5A0F0;
    --color-tertiary-container:     #2A2570;
    --color-on-tertiary:            #161054;
    --color-on-tertiary-container:  #E0E7FF;

    --fg1: #F1F4F6;
    --fg2: #C5CCD0;
    --fg3: #8C9498;

    --color-outline:         #8C9498;
    --color-outline-variant: #3A444A;

    --color-success:           #4ADE80;
    --color-success-container: #052E16;
    --color-warning:           #FB923C;
    --color-warning-container: #431407;
    --color-info:              #60A5FA;
    --color-info-container:    #0C2A4D;
    --color-error:             #F87171;
    --color-error-container:   #450A0A;

    --pc-accent:    #FBBF24;
    --pc-accent-dk: #F59E0B;
    --pc-accent-lt: #4A2A03;
    --pc-accent-on: #1F1300;

    --pc-brand-blue-lt: #1F4E5E;

    --elevation-1: 0 1px 2px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.30);
    --elevation-2: 0 2px 4px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.30);
    --elevation-3: 0 4px 8px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.35);
    --elevation-4: 0 8px 16px rgba(0,0,0,.60), 0 16px 24px rgba(0,0,0,.40);
    --elevation-5: 0 16px 24px rgba(0,0,0,.65), 0 24px 32px rgba(0,0,0,.45);
}

/* =========================================================================
   STATE LAYER MIXIN (applied via ::before pseudo-element)
   ========================================================================= */

.md-state-layer {
    position: relative;
    overflow: hidden;
}

.md-state-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity var(--duration-short) var(--easing-standard);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.md-state-layer:hover::before        { opacity: var(--state-hover); }
.md-state-layer:focus-visible::before { opacity: var(--state-focus); }
.md-state-layer:active::before       { opacity: var(--state-pressed); }

/* =========================================================================
   FOCUS INDICATOR — 2px brand blue ring per HANDOFF
   ========================================================================= */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* High-emphasis form fields use amber focus ring per HANDOFF */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
}

/* =========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   MATERIAL SYMBOLS ICON DEFAULTS
   ========================================================================= */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

.material-symbols-outlined.filled {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* =========================================================================
   SELECTION
   ========================================================================= */
::selection {
    background: var(--pc-accent);
    color: var(--pc-accent-on);
}