/* ================================================================
   GuntioStack — Design Tokens
   colors_and_type.css

   Single source of truth for every visual atom in the system.
   Import this file BEFORE any component CSS.

   Font loading: we use Google Fonts via CDN for now. To self-host,
   drop the files into fonts/ and replace the @import block.
   ================================================================ */


:root {
  /* ---- Brand: Terracotta scale -------------------------------- */
  --terracotta-50:  #FBF1EC;
  --terracotta-100: #F6DDD0;
  --terracotta-200: #EFBFA8;
  --terracotta-300: #E69E7E;
  --terracotta-400: #DF8059;
  --terracotta-500: #D9603B;  /* default brand step */
  --terracotta-600: #C44E2C;
  --terracotta-700: #A23E22;
  --terracotta-800: #7A2F1B;
  --terracotta-900: #4E1F12;

  /* ---- Coffee neutrals (warm-leaning) ------------------------- */
  --coffee-50:  #FAF7F2;  /* canvas */
  --coffee-100: #F3EEE4;
  --coffee-200: #E8E2D7;  /* default border */
  --coffee-300: #D5CCBA;
  --coffee-400: #B0A793;
  --coffee-500: #8A8170;
  --coffee-600: #635B4C;
  --coffee-700: #443F35;
  --coffee-800: #2A2418;  /* ink */
  --coffee-900: #1A150C;

  --paper:      #FFFFFF;  /* surface */

  /* ---- Semantic palettes -------------------------------------- */
  --sage-50:   #F0F3EE;
  --sage-100:  #DCE5D5;
  --sage-500:  #6B8E5A;
  --sage-700:  #3F5C32;
  --sage-900:  #243619;

  --amber-50:  #FBF3E2;
  --amber-100: #F5E2B2;
  --amber-500: #C18A2C;
  --amber-700: #855A14;
  --amber-900: #4A3007;

  --brick-50:  #F8E8E4;
  --brick-100: #F0CBC2;
  --brick-500: #B33A24;
  --brick-700: #7E2415;
  --brick-900: #4A1208;

  --slate-50:  #ECEFF3;
  --slate-100: #D4DAE3;
  --slate-500: #5C6B82;
  --slate-700: #364252;
  --slate-900: #1B2330;

  /* ---- Semantic surface / text / border ----------------------- */
  --canvas:          var(--coffee-50);
  --surface:         var(--paper);
  --surface-sunken:  var(--coffee-100);

  --fg-default:      var(--coffee-800);
  --fg-muted:        var(--coffee-600);
  --fg-subtle:       var(--coffee-500);
  --fg-disabled:     var(--coffee-400);
  --fg-on-brand:     var(--paper);
  --fg-brand:        var(--terracotta-600);

  --border-default:  var(--coffee-200);
  --border-subtle:   var(--coffee-100);
  --border-strong:   var(--coffee-300);
  --border-focus:    var(--terracotta-500);

  --bg-hover:        rgba(42, 36, 24, 0.04);
  --bg-pressed:      rgba(42, 36, 24, 0.08);
  --bg-selected:     var(--terracotta-50);

  /* ---- Semantic feedback -------------------------------------- */
  --success-bg:      var(--sage-50);
  --success-fg:      var(--sage-700);
  --success-border:  var(--sage-100);

  --warning-bg:      var(--amber-50);
  --warning-fg:      var(--amber-700);
  --warning-border:  var(--amber-100);

  --danger-bg:       var(--brick-50);
  --danger-fg:       var(--brick-700);
  --danger-border:   var(--brick-100);

  --info-bg:         var(--slate-50);
  --info-fg:         var(--slate-700);
  --info-border:     var(--slate-100);

  /* ---- Chart palette (flat & geometric) ----------------------- */
  --chart-1: #D9603B; /* terracotta primary */
  --chart-2: #6B8E5A; /* sage */
  --chart-3: #C18A2C; /* amber */
  --chart-4: #5C6B82; /* slate */
  --chart-5: #7A4FAB; /* plum (used only when 5+ series needed) */
  --chart-grid:  var(--coffee-100);
  --chart-axis:  var(--coffee-400);

  /* ---- Typography: families ----------------------------------- */
  --font-display: 'Poppins', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-sans:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Typography: scale (font-size / line-height) ------------ */
  --text-display-xl: 56px;  --lh-display-xl: 1.05;
  --text-display-lg: 40px;  --lh-display-lg: 1.10;
  --text-display-md: 32px;  --lh-display-md: 1.15;
  --text-display-sm: 24px;  --lh-display-sm: 1.20;

  --text-h1: 28px;  --lh-h1: 1.25;
  --text-h2: 20px;  --lh-h2: 1.30;
  --text-h3: 18px;  --lh-h3: 1.35;

  --text-body-lg: 18px; --lh-body-lg: 1.55;
  --text-body:    16px; --lh-body:    1.50;
  --text-body-sm: 14px; --lh-body-sm: 1.45;
  --text-caption: 13px; --lh-caption: 1.40;
  --text-micro:   12px; --lh-micro:   1.35;

  --text-mono-lg: 18px;
  --text-mono:    16px;
  --text-mono-sm: 14px;
  --text-mono-xs: 13px;

  /* ---- Typography: weights ------------------------------------ */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Typography: letter-spacing ----------------------------- */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.08em;

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

  /* ---- Radii -------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted, soft) ---------------------------- */
  --shadow-xs:    0 1px 2px rgba(42, 36, 24, 0.05);
  --shadow-sm:    0 2px 4px rgba(42, 36, 24, 0.06), 0 1px 2px rgba(42, 36, 24, 0.04);
  --shadow-md:    0 6px 16px rgba(42, 36, 24, 0.08), 0 2px 4px rgba(42, 36, 24, 0.04);
  --shadow-lg:    0 14px 32px rgba(42, 36, 24, 0.10), 0 4px 8px rgba(42, 36, 24, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(42, 36, 24, 0.04);

  /* ---- Layout / sizing ---------------------------------------- */
  --row-height-sm: 36px;
  --row-height:    40px;
  --row-height-lg: 48px;
  --table-row:     48px;

  --sidebar-width: 240px;
  --content-max:   1280px;

  /* ---- Motion ------------------------------------------------- */
  --ease-default: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0.0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --duration-fast: 120ms;
  --duration:      180ms;
  --duration-slow: 320ms;

  /* ---- Z-index ------------------------------------------------ */
  --z-base:    0;
  --z-sticky:  10;
  --z-dropdown: 100;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* ================================================================
   Semantic typography classes
   Use these instead of raw font-size where possible.
   ================================================================ */

.text-display-xl,
.text-display-lg,
.text-display-md,
.text-display-sm {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}
.text-display-xl { font-size: var(--text-display-xl); line-height: var(--lh-display-xl); }
.text-display-lg { font-size: var(--text-display-lg); line-height: var(--lh-display-lg); }
.text-display-md { font-size: var(--text-display-md); line-height: var(--lh-display-md); }
.text-display-sm { font-size: var(--text-display-sm); line-height: var(--lh-display-sm); }

.text-h1, .text-h2, .text-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}
.text-h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
.text-h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
.text-h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }

.text-body-lg, .text-body, .text-body-sm, .text-caption, .text-micro {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-default);
}
.text-body-lg { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.text-body    { font-size: var(--text-body);    line-height: var(--lh-body); }
.text-body-sm { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); }
.text-caption { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--fg-muted); }
.text-micro   { font-size: var(--text-micro);   line-height: var(--lh-micro);   color: var(--fg-muted); }

.text-mono, .text-mono-lg, .text-mono-sm, .text-mono-xs {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-default);
}
.text-mono-lg { font-size: var(--text-mono-lg); }
.text-mono    { font-size: var(--text-mono); }
.text-mono-sm { font-size: var(--text-mono-sm); }
.text-mono-xs { font-size: var(--text-mono-xs); }

.text-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.text-muted   { color: var(--fg-muted); }
.text-subtle  { color: var(--fg-subtle); }
.text-brand   { color: var(--fg-brand); }
.text-danger  { color: var(--brick-700); }
.text-success { color: var(--sage-700); }
.text-warning { color: var(--amber-700); }

/* ================================================================
   Base resets used by preview cards & UI kits
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }