/* ============================================================
   INSTAWHEW — TOKENS
   Single source of truth for all CSS custom properties.
   Everything else references these variables.
   ============================================================ */

/* 1. FONT --------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../../fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. TOKENS ------------------------------------------------- */
/*
 * Single source of truth: values live in theme.json.
 * WordPress generates --wp--preset--* variables from theme.json at runtime.
 * We alias them here for ergonomic shorthand throughout component CSS.
 * Tokens with no WP preset equivalent (radius, motion, line-height) are CSS-only.
 */
:root {
  /* Base palette — aliases WP color presets */
  --base-950: var(--wp--preset--color--base-950);
  --base-900: var(--wp--preset--color--base-900);
  --base-800: var(--wp--preset--color--base-800);
  --base-700: var(--wp--preset--color--base-700);
  --base-600: var(--wp--preset--color--base-600);
  --base-500: var(--wp--preset--color--base-500);
  --base-400: var(--wp--preset--color--base-400);
  --base-300: var(--wp--preset--color--base-300);
  --base-200: var(--wp--preset--color--base-200);
  --base-100: var(--wp--preset--color--base-100);
  --base-50:  var(--wp--preset--color--base-50);

  /* Accent palette — aliases WP color presets */
  --accent-700: var(--wp--preset--color--accent-700);
  --accent-600: var(--wp--preset--color--accent-600);
  --accent-500: var(--wp--preset--color--accent-500);
  --accent-400: var(--wp--preset--color--accent-400);
  --accent-300: var(--wp--preset--color--accent-300);
  --accent-200: var(--wp--preset--color--accent-200);
  --accent-100: var(--wp--preset--color--accent-100);
  --accent-50:  var(--wp--preset--color--accent-50);

  /* Semantic status — CSS-only (no WP preset equivalent) */
  --success:    #0C6B38;
  --success-bg: #EDFAF4;
  --warning:    #935200;
  --warning-bg: #FFF7ED;
  --error:      #BE1414;
  --error-bg:   #FEF0F0;
  --info:       var(--accent-600);
  --info-bg:    var(--accent-50);

  /* Typography — aliases WP presets */
  --font:      var(--wp--preset--font-family--inter);
  --font-mono: var(--wp--preset--font-family--mono);

  /* Fluid type scale — aliases WP font-size presets */
  --text-xs:      var(--wp--preset--font-size--xs);
  --text-sm:      var(--wp--preset--font-size--sm);
  --text-base:    var(--wp--preset--font-size--base);
  --text-md:      var(--wp--preset--font-size--md);
  --text-lg:      var(--wp--preset--font-size--lg);
  --text-xl:      var(--wp--preset--font-size--xl);
  --text-2xl:     var(--wp--preset--font-size--2xl);
  --text-3xl:     var(--wp--preset--font-size--3xl);
  --text-4xl:     var(--wp--preset--font-size--4xl);
  --text-display: var(--wp--preset--font-size--display);

  /* Line heights — CSS-only */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing — CSS-only */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* Fluid spacing scale — aliases WP spacing presets */
  --space-1: var(--wp--preset--spacing--1);  /*  4–6px   */
  --space-2: var(--wp--preset--spacing--2);  /*  8–12px  */
  --space-3: var(--wp--preset--spacing--3);  /* 16–24px  */
  --space-4: var(--wp--preset--spacing--4);  /* 24–40px  */
  --space-5: var(--wp--preset--spacing--5);  /* 40–72px  */
  --space-6: var(--wp--preset--spacing--6);  /* 72–152px */

  /* Site gutter — single source of truth. Applied to .wp-site-blocks (see below),
     which wraps every template part (header, footer, main). Full-bleed sections
     escape with margin-inline: calc(-1 * var(--gutter)) and re-establish with
     padding-inline: var(--gutter). */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* Border radius — CSS-only */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows — aliases WP shadow presets */
  --shadow-xs: var(--wp--preset--shadow--xs);
  --shadow-sm: var(--wp--preset--shadow--sm);
  --shadow-md: var(--wp--preset--shadow--md);
  --shadow-lg: var(--wp--preset--shadow--lg);
  --shadow-xl: var(--wp--preset--shadow--xl);

  /* Motion — CSS-only */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;

  /* Compatibility aliases — fix tokens used in woocommerce.css before they were defined */
  --motion-fast: var(--dur-fast);
  --surface-1:   var(--surface-2);
  --dur-slow:  400ms;
}

/* [data-theme="light"] listed alongside :root so sections can be
   pinned to light mode with data-theme="light" regardless of page toggle. */
:root,
[data-theme="light"] {
  --page-bg:      var(--base-50);
  --surface:      #ffffff;
  --surface-2:    var(--base-50);
  --surface-3:    var(--base-100);
  --text-1:       var(--base-900);
  --text-2:       var(--base-600);
  --text-3:       var(--base-400);
  --line:         var(--base-200);
  --line-subtle:  var(--base-100);
}

[data-theme="dark"] {
  --page-bg:      var(--base-950);
  --surface:      var(--base-900);
  --surface-2:    var(--base-800);
  --surface-3:    var(--base-700);
  --text-1:       var(--base-100);
  --text-2:       var(--base-300);
  --text-3:       var(--base-500);
  --line:         var(--base-700);
  --line-subtle:  var(--base-800);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:    0 12px 32px rgba(0,0,0,.6);
  --shadow-xl:    0 24px 64px rgba(0,0,0,.7);
}