/* ============================================================
   Greenroom · Design Tokens
   Single source of truth for colors, typography, spacing,
   radii, and elevation. Calm, editorial UI: white surfaces,
   hairline borders, refined type, no gradients.
   ============================================================ */

@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- Color · Neutrals (the spine of the system) ---------- */
  --gr-white:        #FFFFFF;
  --gr-paper:        #FAFAF9;   /* off-white app surface */
  --gr-stone-50:     #F5F5F4;
  --gr-stone-100:    #EFEFEE;
  --gr-stone-200:    #E5E5E3;   /* hairline border (default) */
  --gr-stone-300:    #D4D4D2;   /* hairline border (strong) */
  --gr-stone-400:    #A3A3A0;
  --gr-stone-500:    #737370;
  --gr-stone-600:    #525250;
  --gr-stone-700:    #3F3F3D;
  --gr-stone-800:    #262625;
  --gr-stone-900:    #18181A;
  --gr-ink:          #0A0A0B;   /* near-black, primary text */

  /* ---------- Color · Brand (Greenroom green) ---------- */
  --gr-green-50:     #ECF6F1;
  --gr-green-100:    #D6ECDF;
  --gr-green-200:    #AED9C0;
  --gr-green-300:    #7DC09C;
  --gr-green-400:    #4DA378;
  --gr-green-500:    #1F7A4F;   /* primary brand */
  --gr-green-600:    #166442;
  --gr-green-700:    #115035;
  --gr-green-800:    #0D3D29;
  --gr-green-900:    #082A1C;

  /* ---------- Color · Semantic ---------- */
  --gr-success:      var(--gr-green-500);
  --gr-success-bg:   var(--gr-green-50);
  --gr-warning:      #B45309;
  --gr-warning-bg:   #FEF6E7;
  --gr-danger:       #B42318;
  --gr-danger-bg:    #FEF0EF;
  --gr-info:         #1D4ED8;
  --gr-info-bg:      #EEF2FB;

  /* ---------- Color · Foreground / Background semantic ---------- */
  --fg-1:            var(--gr-ink);          /* primary text */
  --fg-2:            var(--gr-stone-600);    /* secondary text */
  --fg-3:            var(--gr-stone-500);    /* tertiary / meta */
  --fg-4:            var(--gr-stone-400);    /* placeholder / disabled */
  --fg-on-brand:     var(--gr-white);
  --fg-link:         var(--gr-green-600);

  --bg-app:          var(--gr-paper);
  --bg-surface:      rgba(255, 255, 255, 0.72);
  --bg-subtle:       rgba(245, 245, 244, 0.65);
  --bg-muted:        rgba(239, 239, 238, 0.70);
  --bg-brand:        var(--gr-green-500);
  --bg-brand-soft:   var(--gr-green-50);

  --border-1:        var(--gr-stone-200);    /* default hairline */
  --border-2:        var(--gr-stone-300);    /* stronger hairline */
  --border-focus:    var(--gr-green-500);

  /* ---------- Type · Families ---------- */
  --font-sans: 'Satoshi', -apple-system, system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type · Scale (size / line-height / tracking / weight) ---------- */
  --text-display-xl:  600 64px/68px var(--font-sans); /* tracking -0.03em */
  --text-display-lg:  600 52px/56px var(--font-sans); /* tracking -0.025em */
  --text-h1:          600 40px/48px var(--font-sans); /* -0.02em */
  --text-h2:          600 32px/40px var(--font-sans); /* -0.015em */
  --text-h3:          600 24px/32px var(--font-sans); /* -0.01em */
  --text-h4:          600 20px/28px var(--font-sans); /* -0.005em */
  --text-body-lg:     400 20px/30px var(--font-sans);
  --text-body:        400 18px/28px var(--font-sans);
  --text-body-sm:     400 15px/24px var(--font-sans);
  --text-caption:     500 14px/20px var(--font-sans); /* +0.01em uppercase often */
  --text-code:        400 15px/24px var(--font-mono);

  /* ---------- Spacing · 4px scale ---------- */
  --sp-0:  0px;
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  20px;
  --sp-7:  24px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 48px;
  --sp-11: 64px;
  --sp-12: 80px;
  --sp-13: 96px;

  /* ---------- Radii ---------- */
  --radius-xs:  4px;   /* tags, tiny chips */
  --radius-sm:  6px;   /* inputs, small buttons */
  --radius-md:  8px;   /* default buttons, menu items */
  --radius-lg:  10px;  /* cards */
  --radius-xl:  12px;  /* prominent cards */
  --radius-2xl: 16px;  /* modals, hero containers */
  --radius-full: 9999px;

  /* ---------- Elevation · subtle, layered ---------- */
  --shadow-xs:  0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-sm:  0 1px 2px rgba(10, 10, 11, 0.06), 0 1px 1px rgba(10, 10, 11, 0.03);
  --shadow-md:  0 4px 12px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-lg:  0 12px 32px -8px rgba(10, 10, 11, 0.10), 0 4px 12px -4px rgba(10, 10, 11, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(10, 10, 11, 0.16), 0 8px 16px -8px rgba(10, 10, 11, 0.06);
  --ring-1:     inset 0 0 0 1px var(--border-1);
  --ring-focus: 0 0 0 3px rgba(31, 122, 79, 0.18);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ============================================================
   Dark mode token overrides
   ============================================================ */

html[data-theme="dark"] {
  --gr-paper:        #0d0d0f;
  --gr-white:        #161618;

  --fg-1:            #f4f4f5;
  --fg-2:            #a1a1aa;
  --fg-3:            #71717a;
  --fg-4:            #52525b;

  --bg-app:          transparent;
  --bg-surface:      rgba(22, 24, 28, 0.72);
  --bg-subtle:       rgba(255, 255, 255, 0.05);
  --bg-muted:        rgba(255, 255, 255, 0.09);
  --bg-brand-soft:   rgba(34,197,94,0.10);

  --border-1:        rgba(255,255,255,0.08);
  --border-2:        rgba(255,255,255,0.14);
  --border-focus:    #4da378;

  --gr-green-50:     rgba(77,163,120,0.08);
  --gr-green-100:    rgba(77,163,120,0.15);
  --gr-green-200:    rgba(77,163,120,0.25);
  --gr-green-500:    #4da378;
  --gr-green-600:    #35825a;
  --gr-green-700:    #63b78e;

  --gr-warning:      #fbbf24;
  --gr-warning-bg:   rgba(251,191,36,0.10);
  --gr-danger:       #f87171;
  --gr-danger-bg:    rgba(239,68,68,0.10);
  --gr-info:         #60a5fa;
  --gr-info-bg:      rgba(96,165,250,0.10);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.6);
  --ring-focus: 0 0 0 3px rgba(34,197,94,0.20);
}

/* ============================================================
   Semantic element styles · use these directly when
   prototyping plain HTML
   ============================================================ */

.gr-root,
.gr-root * { box-sizing: border-box; }

.gr-root {
  font: var(--text-body);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gr-display-xl { font: var(--text-display-xl); letter-spacing: -0.03em; color: var(--fg-1); }
.gr-display-lg { font: var(--text-display-lg); letter-spacing: -0.025em; color: var(--fg-1); }
.gr-h1         { font: var(--text-h1);         letter-spacing: -0.02em;  color: var(--fg-1); }
.gr-h2         { font: var(--text-h2);         letter-spacing: -0.015em; color: var(--fg-1); }
.gr-h3         { font: var(--text-h3);         letter-spacing: -0.01em;  color: var(--fg-1); }
.gr-h4         { font: var(--text-h4);         letter-spacing: -0.005em; color: var(--fg-1); }
.gr-body-lg    { font: var(--text-body-lg);    color: var(--fg-1); }
.gr-body       { font: var(--text-body);       color: var(--fg-1); }
.gr-body-sm    { font: var(--text-body-sm);    color: var(--fg-2); }
.gr-caption    { font: var(--text-caption);    color: var(--fg-3); letter-spacing: 0.04em; text-transform: uppercase; }
.gr-code       { font: var(--text-code);       color: var(--fg-1); background: var(--bg-muted); padding: 1px 5px; border-radius: var(--radius-xs); }

/* Surfaces */
.gr-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
.gr-card--raised {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}