/*
 * Design Tokens
 * ─────────────────────────────────────────────────────────────────────────────
 * This file extends theme.json tokens — it does not replace them.
 * All site-specific custom properties live here at :root.
 *
 * Naming convention:
 *   --msk-{category}-{variant}
 *
 * theme.json tokens are available as:
 *   --wp--preset--color--{slug}
 *   --wp--preset--font-size--{slug}
 *   --wp--preset--spacing--{slug}
 *   etc.
 *
 * We reference those presets here to stay in sync.
 * If theme.json changes a color, our tokens that reference it update automatically.
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

    /* ── Colour Aliases ──────────────────────────────────────────────────
     * Semantic names that map to theme.json palette slugs.
     * Claude Code: swap the var() references to match the actual theme slugs.
     */
    --msk-color-brand-primary:    var(--wp--preset--color--primary,    #1a1a2e);
    --msk-color-brand-secondary:  var(--wp--preset--color--secondary,  #16213e);
    --msk-color-accent:           var(--wp--preset--color--accent,      #991b1b);
    --msk-color-surface:          var(--wp--preset--color--base,        #ffffff);
    --msk-color-surface-alt:      var(--wp--preset--color--base-2,      #f6f6f6);
    --msk-color-text-primary:     var(--wp--preset--color--contrast,    #111111);
    --msk-color-text-muted:       var(--wp--preset--color--contrast-2,  #666666);
    --msk-color-border:           var(--wp--preset--color--contrast-3,  #e0e0e0);

    /* ── Gradient Palette ────────────────────────────────────────────────
     * Reusable gradients built from token colours.
     * One source of truth; use these in component CSS.
     */
    --msk-gradient-hero:          linear-gradient(
                                      135deg,
                                      var(--msk-color-brand-primary) 0%,
                                      var(--msk-color-brand-secondary) 100%
                                  );
    --msk-gradient-accent:        linear-gradient(
                                      90deg,
                                      var(--msk-color-accent) 0%,
                                      color-mix(in oklch, var(--msk-color-accent) 70%, var(--msk-color-brand-primary)) 100%
                                  );
    --msk-gradient-surface:       linear-gradient(
                                      180deg,
                                      var(--msk-color-surface) 0%,
                                      var(--msk-color-surface-alt) 100%
                                  );

    /* ── Overlay & Scrim ─────────────────────────────────────────────────
     * For hero images, card hovers, modals.
     */
    --msk-overlay-dark:           rgba(0, 0, 0, 0.45);
    --msk-overlay-brand:          color-mix(in oklch, var(--msk-color-brand-primary) 75%, transparent);

    /* ── Typography Scale ────────────────────────────────────────────────
     * Fluid type using clamp(). Min / preferred / max.
     * These extend theme.json font sizes — use for utility classes and
     * components where block-level font sizes aren't available.
     */
    --msk-font-size-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
    --msk-font-size-sm:   clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --msk-font-size-base: clamp(1rem,     0.95rem  + 0.25vw, 1.125rem);
    --msk-font-size-md:   clamp(1.125rem, 1rem     + 0.5vw,  1.375rem);
    --msk-font-size-lg:   clamp(1.375rem, 1.1rem   + 1vw,    2rem);
    --msk-font-size-xl:   clamp(1.75rem,  1.3rem   + 1.5vw,  3rem);
    --msk-font-size-2xl:  clamp(2.25rem,  1.5rem   + 2vw,    4rem);

    /* ── Line Heights ────────────────────────────────────────────────────*/
    --msk-leading-tight:   1.2;
    --msk-leading-snug:    1.375;
    --msk-leading-normal:  1.6;
    --msk-leading-loose:   1.8;

    /* ── Letter Spacing ──────────────────────────────────────────────────*/
    --msk-tracking-tight:  -0.03em;
    --msk-tracking-normal:  0;
    --msk-tracking-wide:    0.05em;
    --msk-tracking-wider:   0.1em;
    --msk-tracking-widest:  0.15em;

    /* ── Spacing Scale ───────────────────────────────────────────────────
     * Maps to a harmonic scale. Use these in component CSS.
     * theme.json spacing presets are preferred for block-level spacing.
     */
    --msk-space-1:   0.25rem;
    --msk-space-2:   0.5rem;
    --msk-space-3:   0.75rem;
    --msk-space-4:   1rem;
    --msk-space-5:   1.25rem;
    --msk-space-6:   1.5rem;
    --msk-space-8:   2rem;
    --msk-space-10:  2.5rem;
    --msk-space-12:  3rem;
    --msk-space-16:  4rem;
    --msk-space-20:  5rem;
    --msk-space-24:  6rem;

    /* ── Border Radius ───────────────────────────────────────────────────*/
    --msk-radius-sm:   0.25rem;
    --msk-radius-md:   0.5rem;
    --msk-radius-lg:   1rem;
    --msk-radius-xl:   1.5rem;
    --msk-radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────────────────
     * Layered shadows for depth. Use sparingly — one level per element.
     */
    --msk-shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.1);
    --msk-shadow-md:
        0 4px 6px  rgba(0, 0, 0, 0.05),
        0 10px 15px rgba(0, 0, 0, 0.1);
    --msk-shadow-lg:
        0 10px 20px rgba(0, 0, 0, 0.08),
        0 30px 60px rgba(0, 0, 0, 0.12);
    --msk-shadow-accent:
        0 4px 20px color-mix(in oklch, var(--msk-color-accent) 35%, transparent);

    /* ── Transitions ─────────────────────────────────────────────────────
     * Standard easing curves for consistent motion feel.
     */
    --msk-ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
    --msk-ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
    --msk-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --msk-ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --msk-duration-fast:    150ms;
    --msk-duration-normal:  250ms;
    --msk-duration-slow:    400ms;
    --msk-duration-slower:  600ms;

    /* ── Z-Index Scale ───────────────────────────────────────────────────
     * Named layers prevent stacking context chaos.
     */
    --msk-z-base:     0;
    --msk-z-raised:   10;
    --msk-z-dropdown: 100;
    --msk-z-sticky:   200;
    --msk-z-overlay:  300;
    --msk-z-modal:    400;
    --msk-z-toast:    500;
}