/* ================================================================
   GuntioStack
   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.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

: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);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 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;
}