/* ============================================================
   MIDSUMMER FESTIVAL — Design Tokens
   Source of truth: design_handoff_midsummer_2027/_ds/tokens/*.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Foundation · warm ink ---- */
  --ink-900: #14130E;
  --ink-850: #1B1A13;
  --ink-800: #232118;
  --ink-700: #322F23;
  --ink-600: #46422F;
  --ink-500: #5E5840;

  /* ---- Foundation · stone ---- */
  --stone-500: #8A8268;
  --stone-400: #A89F84;
  --stone-300: #C8BFA6;
  --stone-200: #DED6C2;

  /* ---- Foundation · bone ---- */
  --bone-300: #E6DECC;
  --bone-200: #EFE9DA;
  --bone-100: #F6F1E6;
  --bone-050: #FBF8F1;
  --white:    #FFFFFF;

  /* ---- Brand · EMBER ---- */
  --ember-700: #A8350C;
  --ember-600: #C8410F;
  --ember-500: #E8541E;
  --ember-400: #F26A33;
  --ember-300: #F89466;
  --ember-100: #FBD9C6;

  /* ---- Brand · SOLAR ---- */
  --solar-600: #D98613;
  --solar-500: #F4A52A;
  --solar-400: #FBBE52;
  --solar-200: #FBE2AE;

  /* ---- Brand · MEADOW ---- */
  --meadow-700: #34501F;
  --meadow-600: #466A2A;
  --meadow-500: #5E8A3A;
  --meadow-300: #9DBE6F;
  --meadow-100: #DCE8C6;

  /* ---- Brand · TWILIGHT ---- */
  --twilight-700: #322758;
  --twilight-600: #4A3B7E;
  --twilight-500: #6A53A6;
  --twilight-300: #A593D4;
  --twilight-100: #DCD3F0;

  /* ---- Wildflower accents ---- */
  --corn-500: #4C6FD6;
  --corn-300: #9DB2EC;

  /* Surfaces — default (light) */
  --surface-page:    var(--bone-100);
  --surface-raised:  var(--bone-050);
  --surface-card:    var(--white);
  --surface-sunken:  var(--bone-200);
  --surface-inverse: var(--ink-900);

  /* Text — on light */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--stone-500);
  --text-inverse: var(--bone-100);
  --text-onember: var(--white);

  /* Lines & borders */
  --line-soft:   color-mix(in srgb, var(--ink-900) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--ink-900) 24%, transparent);
  --line-ondark: color-mix(in srgb, var(--bone-100) 16%, transparent);

  /* Brand roles */
  --accent:          var(--ember-500);
  --accent-hover:    var(--ember-600);
  --accent-press:    var(--ember-700);
  --accent-soft:     var(--ember-100);
  --accent-contrast: var(--white);
  --accent-2:        var(--solar-500);
  --accent-3:        var(--meadow-500);
  --accent-4:        var(--twilight-500);

  /* Status */
  --ok:      var(--meadow-600);
  --ok-soft: var(--meadow-100);
  --warn:    var(--solar-500);
  --warn-soft: var(--solar-200);
  --danger:  #D2392A;
  --danger-soft: #F7D8D2;
  --info:    var(--corn-500);
  --info-soft: var(--corn-300);

  --focus-ring: color-mix(in srgb, var(--ember-500) 55%, transparent);

  /* Gradients */
  --grad-solstice: linear-gradient(100deg, var(--solar-400) 0%, var(--ember-500) 46%, var(--twilight-600) 100%);
  --grad-ember: linear-gradient(180deg, var(--ember-400) 0%, var(--ember-600) 100%);
  --grad-night: linear-gradient(180deg, #1C1A2E 0%, var(--ink-900) 70%);
  --scrim-bottom: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ink-900) 88%, transparent) 100%);
  --scrim-full:   linear-gradient(180deg, color-mix(in srgb, var(--ink-900) 20%, transparent) 0%, color-mix(in srgb, var(--ink-900) 82%, transparent) 100%);

  /* Typography */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-text:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;

  --fs-2xs:  0.6875rem;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.5rem;
  --fs-4xl:  5rem;
  --fs-5xl:  7.5rem;

  --lh-tight:  0.92;
  --lh-snug:   1.05;
  --lh-normal: 1.5;
  --lh-relax:  1.65;

  --tr-display: -0.01em;
  --tr-tight:   0;
  --tr-label:   0.14em;
  --tr-mega:    0.2em;

  /* Effects */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   7px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-2xl:  26px;
  --r-pill: 999px;

  --bw-hair: 1px;
  --bw:      1.5px;
  --bw-bold: 2.5px;

  --shadow-xs:   0 1px 2px rgba(20,19,14,0.08);
  --shadow-sm:   0 2px 6px rgba(20,19,14,0.10);
  --shadow-card: 0 10px 28px -12px rgba(20,19,14,0.26);
  --shadow-pop:  0 22px 60px -18px rgba(20,19,14,0.40);
  --shadow-plate: 0 4px 0 0 var(--ink-900);

  --glow-ember: 0 0 0 1px color-mix(in srgb, var(--ember-500) 40%, transparent),
                0 8px 32px -6px color-mix(in srgb, var(--ember-500) 55%, transparent);
  --glow-solar: 0 0 28px -4px color-mix(in srgb, var(--solar-500) 60%, transparent);
  --glow-twilight: 0 0 36px -6px color-mix(in srgb, var(--twilight-500) 65%, transparent);

  --blur-sm: 6px;
  --blur-md: 16px;
  --blur-lg: 28px;
  --glass-light: color-mix(in srgb, var(--bone-050) 62%, transparent);
  --glass-dark:  color-mix(in srgb, var(--ink-900) 52%, transparent);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
  --dur-amb:  900ms;

  --t-control: color var(--dur-fast) var(--ease-out),
               background-color var(--dur-fast) var(--ease-out),
               border-color var(--dur-fast) var(--ease-out),
               box-shadow var(--dur-med) var(--ease-out),
               transform var(--dur-fast) var(--ease-out);

  /* Spacing */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 7rem;
  --sp-12: 9rem;

  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --container-2xl: 1600px;

  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(3.5rem, 9vw, 8rem);

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

[data-world="night"] {
  --surface-page:    var(--ink-900);
  --surface-raised:  var(--ink-850);
  --surface-card:    var(--ink-800);
  --surface-sunken:  #100F0A;
  --surface-inverse: var(--bone-100);

  --text-strong:  var(--bone-050);
  --text-body:    var(--bone-200);
  --text-muted:   var(--stone-400);
  --text-faint:   var(--stone-500);
  --text-inverse: var(--ink-900);

  --line-soft:   color-mix(in srgb, var(--bone-100) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--bone-100) 22%, transparent);

  --accent-soft: color-mix(in srgb, var(--ember-500) 22%, var(--ink-900));
  --ok-soft:   color-mix(in srgb, var(--meadow-500) 24%, var(--ink-900));
  --warn-soft: color-mix(in srgb, var(--solar-500) 22%, var(--ink-900));
  --danger-soft: color-mix(in srgb, #D2392A 26%, var(--ink-900));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
    --dur-amb: 0ms;
  }
}

/* ---- Base element defaults ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
::selection { background: var(--ember-500); color: var(--white); }
:focus-visible { outline: var(--bw-bold) solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; display: block; }
button { font: inherit; }