/* ============================================================
   PW Starter Theme — design tokens
   Fill these values for each project. base.css reads from here.
   Do NOT put any rules here — only :root{} token declarations.
   ============================================================ */

:root {

    /* ── Colors ──────────────────────────────────────────── */
    --color-bg:           #FFFFFF;                 /* Page background */
    --color-surface:      #FFFFFF;                 /* Card / panel background */
    --color-text:         #1D1D1D;                 /* Primary body text */
    --color-muted:        rgba(29, 29, 29, 0.72);  /* Secondary / caption text */
    --color-dim:          rgba(29, 29, 29, 0.55);  /* Disabled / placeholder text */
    --color-border:       #E6E6E6;                 /* Outer borders */
    --color-border-inner: #F0F0F0;                 /* Inner dividers */
    --color-row:          #FCFCFC;                 /* Alternating table/list row */
    --color-elevated:     #FCFCFC;                 /* Elevated surface (tooltip, popover) */
    --color-card-bg:      #FFFFFF;                 /* Card / row background (lighter than surface) */
    --color-accent:       #DA8609;                 /* Brand accent / highlight */
    --color-accent-subtle: rgba(218, 134, 9, 0.06); /* subtle hover/active tint */
    --color-accent-glow:   rgba(218, 134, 9, 0.15); /* focus ring / glow */
    --color-overlay:       rgba(29, 29, 29, 0.55); /* Dark overlay for modals, backdrops */

    /* Button colors */
    --color-btn-bg:       #DA8609;
    --color-btn-hover:    #C87A08;
    --color-btn-active:   #B56E07;
    --color-btn-text:     #FFFFFF;

    /* Brand support colors */
    --color-brand-blue:   #1F2031;  /* btn frame, dark section bg */
    --color-brand-brown:  #4E342E;  /* editorial accents, footer */
    --color-secondary:    #7A568E;  /* ghost/outline CTAs, tags */

    /* ── Typography — Families ───────────────────────────── */
    --font-primary:       'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;        /* Headings */
    --font-secondary:     'IBM Plex Sans', 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;  /* Body / UI */

    /* ── Typography — Scale ──────────────────────────────── */
    --text-xs:            1.25rem;
    --text-sm:            1.5rem;
    --text-base:          1.75rem;
    --text-md:            2.25rem;
    --text-lg:            2.75rem;
    --text-xl:            3.5rem;
    --text-2xl:           4.5rem;
    --text-3xl:           5.25rem;
    --text-btn:           1.5rem;

    /* ── Typography — Weights ────────────────────────────── */
    --weight-light:       350;
    --weight-regular:     450;
    --weight-medium:      550;
    --weight-semibold:    650;
    --weight-bold:        750;

    /* ── Typography — Tracking ───────────────────────────── */
    --tracking-tight:     -0.02em;
    --tracking-normal:    0;
    --tracking-wide:      0.06em;
    --tracking-wider:     0.08em;

    /* ── Typography — Leading ────────────────────────────── */
    --leading-tight:      1.2;
    --leading-normal:     1.2;
    --leading-relaxed:    1.65;

    /* ── Spacing ─────────────────────────────────────────── */
    --gap-xxs:            1rem;
    --gap-xs:             1.5rem;
    --gap-sm:             2rem;
    --gap-md:             3rem;
    --gap-lg:             4rem;
    --gap-xl:             6rem;
    --gap-xxl:            8rem;

    /* ── Layout ──────────────────────────────────────────── */
    --side-pad:           clamp(1.25rem, 4vw, 4rem); /* Desktop horizontal padding */
    --side-pad-mobile:    1.25rem;                   /* Mobile horizontal padding */
    --content-top:        6.5rem;                     /* Padding from header to first section */
    --section-pad-t:      clamp(5rem, 8vw, 9rem);   /* Section top padding */
    --section-pad-b:      clamp(5rem, 8vw, 9rem);   /* Section bottom padding */
    /* Vertical air equal to two stacked .sec paddings (one block bottom + next top) */
    --section-seam:       calc(var(--section-pad-b) * 2);
    --max-width:          1120px;                     /* Default content max-width */
    --max-width-narrow:   760px;                      /* Narrow content (articles, forms) */
    --max-width-wide:     1280px;                     /* Full-bleed content */

    /* ── Components ──────────────────────────────────────── */
    --radius:             14px;   /* Default border-radius */
    --radius-sm:          10px;
    --radius-lg:          18px;
    --radius-full:        999px;
    --space-btn:          0.85rem 1.15rem;   /* Button padding shorthand */
    --border-width:       1px;

    /* ── Transitions ─────────────────────────────────────── */
    --transition-fast:    150ms ease-out;
    --transition-base:    200ms ease-out;
    --transition-slow:    320ms ease-out;

    /* ── Z-index ─────────────────────────────────────────── */
    --z-header:           100;
    --z-mobile-nav:       200;
    --z-modal:            300;
    --z-tooltip:          400;

    /* ── Header ──────────────────────────────────────────── */
    --header-h:           68px;  /* Set dynamically by JS — this is the preflight fallback only */
}