/* =========================================================================
   Glidzy — Colors & Type
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ember:        #FF5A1F;
  --ember-hot:    #FF4A0A;
  --ember-soft:   #FFE2D3;
  --ember-ink:    #4A1708;

  --ink:          #141413;
  --ink-80:       rgba(20,20,19,0.80);
  --ink-60:       rgba(20,20,19,0.60);
  --ink-40:       rgba(20,20,19,0.40);
  --ink-12:       rgba(20,20,19,0.12);
  --ink-06:       rgba(20,20,19,0.06);

  --cream:        #FBF7F1;
  --bone:         #F4EEE2;
  --sand:         #E8DFCD;
  --fog:          #CFC6B4;

  --plum:         #4A1942;
  --plum-soft:    #E9DFE6;

  --success:      #1E7A42;
  --success-soft: #D9ECE1;
  --danger:       #C22B2B;
  --danger-soft:  #F6DADA;
  --warn:         #B37200;
  --warn-soft:    #F5E4BF;
  --live:         #E8341C;

  --bg:           var(--cream);
  --bg-elev:      #FFFFFF;
  --bg-inverse:   var(--ink);

  --fg1:          var(--ink);
  --fg2:          var(--ink-80);
  --fg3:          var(--ink-60);
  --fg-muted:     var(--ink-40);
  --fg-inverse:   var(--cream);

  --line:         #EBE4D8;
  --line-strong:  #D8CFBE;
  --line-inverse: rgba(251,247,241,0.12);

  --s1:  4px;  --s2:  8px;  --s3:  12px; --s4:  16px; --s5:  20px;
  --s6:  24px; --s7:  32px; --s8:  40px; --s9:  48px; --s10: 64px;
  --s11: 80px; --s12: 128px;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-full: 999px;

  --shadow-pop:   0 18px 40px -16px rgba(20,20,19,0.18), 0 2px 6px -2px rgba(20,20,19,0.06);
  --shadow-sheet: 0 -18px 40px -16px rgba(20,20,19,0.18);
  --focus-ring:   0 0 0 2px var(--cream), 0 0 0 4px var(--ember);

  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-tap:   120ms;
  --dur-panel: 240ms;
  --dur-page:  400ms;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: 64px;
  --t-h1:      40px;
  --t-h2:      28px;
  --t-h3:      22px;
  --t-title:   17px;
  --t-body:    16px;
  --t-sm:      14px;
  --t-xs:      12px;
  --t-tag:     11px;
}

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
p, .t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.45;
}

*:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: inherit; }