/* ============================================================================
   Spawn Design System — Colors & Type
   Source of truth: @spawn-llc/ui (ui/src/tokens.css)
   Brand: warm off-white workspace + deep purple identity + pastel semantics.
   Type: Open Sauce Sans (custom local font).
   ============================================================================ */

/* ----- Fonts ----- */
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* =====================================================
     PRIMITIVE COLOR TOKENS
     Raw oklch values — never reference these directly in
     components, use semantic tokens instead.
     ===================================================== */
  --spawn-color-white:        oklch(1 0 0);
  --spawn-color-cream-50:     oklch(0.99  0.002 82);   /* page canvas */
  --spawn-color-cream-100:    oklch(0.948 0.008 82);   /* muted surface */
  --spawn-color-ink-900:      oklch(0.205 0.018 286);  /* foreground */
  --spawn-color-ink-700:      oklch(0.37  0.016 286);  /* body */
  --spawn-color-ink-500:      oklch(0.52  0.014 286);  /* muted fg */

  --spawn-color-purple-950:   oklch(0.23  0.06  292);  /* sidebar */
  --spawn-color-purple-900:   oklch(0.285 0.075 292);  /* primary */
  --spawn-color-purple-700:   oklch(0.405 0.105 292);  /* hover/active */
  --spawn-color-purple-100:   oklch(0.925 0.024 292);  /* accent surface */

  --spawn-color-green-100:    #f1fdf7;
  --spawn-color-green-300:    #bcf7db;
  --spawn-color-green-700:    #499c80;
  --spawn-color-amber-100:    #fffcf0;
  --spawn-color-amber-300:    #feeca4;
  --spawn-color-amber-700:    #cd7b3e;
  --spawn-color-red-100:      #fff6f6;
  --spawn-color-red-300:      #ffd8d7;
  --spawn-color-red-700:      #d54d4f;
  --spawn-color-blue-100:     #f1f6ff;
  --spawn-color-blue-300:     #cfdcf8;
  --spawn-color-blue-700:     #4e6bb3;

  /* =====================================================
     SEMANTIC COLOR TOKENS — use these in components.
     ===================================================== */
  --spawn-background:           var(--spawn-color-cream-50);
  --spawn-foreground:           var(--spawn-color-ink-900);
  --spawn-card:                 var(--spawn-color-white);
  --spawn-card-foreground:      var(--spawn-color-ink-900);
  --spawn-popover:              var(--spawn-color-white);
  --spawn-popover-foreground:   var(--spawn-color-ink-900);
  --spawn-muted:                var(--spawn-color-cream-100);
  --spawn-muted-foreground:     var(--spawn-color-ink-500);
  --spawn-border:               oklch(0.875 0.009 82);
  --spawn-primary:              var(--spawn-color-purple-900);
  --spawn-primary-foreground:   oklch(0.985 0 0);
  --spawn-secondary:            var(--spawn-muted);
  --spawn-secondary-foreground: oklch(0.245 0.02 286);
  --spawn-accent:               var(--spawn-color-purple-100);
  --spawn-accent-foreground:    var(--spawn-color-purple-900);
  --spawn-destructive:          var(--spawn-color-red-700);
  --spawn-ring:                 oklch(0.42 0.095 292 / 34%);

  /* Status surfaces — soft border ring + near-white fill + saturated text. */
  --spawn-success-bg:     var(--spawn-color-green-100);
  --spawn-success-text:   var(--spawn-color-green-700);
  --spawn-success-border: var(--spawn-color-green-300);
  --spawn-warning-bg:     var(--spawn-color-amber-100);
  --spawn-warning-text:   var(--spawn-color-amber-700);
  --spawn-warning-border: var(--spawn-color-amber-300);
  --spawn-danger-bg:      var(--spawn-color-red-100);
  --spawn-danger-text:    var(--spawn-color-red-700);
  --spawn-danger-border:  var(--spawn-color-red-300);
  --spawn-info-bg:        var(--spawn-color-blue-100);
  --spawn-info-text:      var(--spawn-color-blue-700);
  --spawn-info-border:    var(--spawn-color-blue-300);

  /* Sidebar (dark surface, structural identity). */
  --spawn-sidebar-bg:        var(--spawn-color-purple-950);
  --spawn-sidebar-fg:        oklch(0.93 0.012 292);
  --spawn-sidebar-accent:    var(--spawn-color-purple-900);
  --spawn-sidebar-accent-fg: oklch(0.985 0.004 292);
  --spawn-sidebar-border:    oklch(0.34 0.045 292);

  /* =====================================================
     RADII, SHADOWS, SPACING
     ===================================================== */
  --spawn-radius-sm:  0.5rem;   /* 8px  — inline pills, sm controls */
  --spawn-radius-md:  0.75rem;  /* 12px — buttons, inputs */
  --spawn-radius-lg:  1rem;     /* 16px — popovers, alerts */
  --spawn-radius-xl:  1.25rem;  /* 20px — cards, table containers, sheets */

  --spawn-shadow-card:    0 1px 2px rgba(35, 28, 58, 0.025), 0 10px 24px rgba(35, 28, 58, 0.025);
  --spawn-shadow-primary: 0 1px 1px rgba(35, 28, 58, 0.06),  0 10px 24px rgba(48, 30, 84, 0.12);
  --spawn-shadow-popover: 0 18px 52px rgba(35, 28, 58, 0.14);

  /* 4px baseline grid */
  --spawn-space-1: 0.25rem; /*  4 */
  --spawn-space-2: 0.5rem;  /*  8 */
  --spawn-space-3: 0.75rem; /* 12 */
  --spawn-space-4: 1rem;    /* 16 */
  --spawn-space-5: 1.25rem; /* 20 */
  --spawn-space-6: 1.5rem;  /* 24 */
  --spawn-space-8: 2rem;    /* 32 */
  --spawn-space-10: 2.5rem; /* 40 */
  --spawn-space-12: 3rem;   /* 48 */
  --spawn-space-16: 4rem;   /* 64 */
  --spawn-space-20: 5rem;   /* 80 */
  --spawn-space-24: 6rem;   /* 96 */

  /* =====================================================
     TYPE SCALE — base
     Open Sauce Sans is the only family. No serif, no mono
     surface in product UI (mono only in code/JSON blocks).
     ===================================================== */
  --spawn-font-sans:    "Open Sauce Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --spawn-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --spawn-text-xs:   0.75rem;   /* 12 — timestamps, eyebrows, micro meta */
  --spawn-text-sm:   0.875rem;  /* 14 — body, table cells, form text */
  --spawn-text-base: 1rem;      /* 16 — stat labels, marketing body */
  --spawn-text-md:   1.125rem;  /* 18 — card titles, dialog titles */
  --spawn-text-lg:   1.25rem;   /* 20 — section heads */
  --spawn-text-xl:   1.5rem;    /* 24 — page heads (mobile) */
  --spawn-text-2xl:  1.875rem;  /* 30 — page header / stat values */
  --spawn-text-3xl:  2.25rem;   /* 36 — marketing H2 */
  --spawn-text-4xl:  3rem;      /* 48 — marketing H1 (mobile) */
  --spawn-text-5xl:  4rem;      /* 64 — marketing hero (desktop) */
  --spawn-text-6xl:  5rem;      /* 80 — biggest display, sparingly */

  --spawn-leading-tight: 1.15;
  --spawn-leading-snug:  1.3;
  --spawn-leading-base:  1.5;
  --spawn-leading-relax: 1.65;

  --spawn-tracking-tight:  -0.01em;
  --spawn-tracking-normal: 0;
  --spawn-tracking-wide:   0.18em;   /* eyebrow ALL-CAPS labels */

  --spawn-weight-regular: 400;
  --spawn-weight-medium:  500;
  --spawn-weight-semi:    600;       /* default for headings */
  --spawn-weight-bold:    700;

  /* =====================================================
     SEMANTIC TYPE TOKENS — apply via these mixin classes
     ===================================================== */
}

/* ---- BASE TYPE STYLES (semantic) ---- */
html, body {
  font-family: var(--spawn-font-sans);
  color: var(--spawn-foreground);
  background: var(--spawn-background);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.spawn-display {
  font-family: var(--spawn-font-sans);
  font-weight: var(--spawn-weight-semi);
  font-size: clamp(2.25rem, 1.4rem + 3vw, var(--spawn-text-5xl));
  line-height: var(--spawn-leading-tight);
  letter-spacing: var(--spawn-tracking-tight);
}
.spawn-h1 {
  font-size: var(--spawn-text-2xl);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
}
.spawn-h2 {
  font-size: var(--spawn-text-lg);
  font-weight: var(--spawn-weight-semi);
  line-height: var(--spawn-leading-snug);
}
.spawn-h3 {
  font-size: var(--spawn-text-md);
  font-weight: 700;
  line-height: 1.35;
}
.spawn-body {
  font-size: var(--spawn-text-sm);
  line-height: var(--spawn-leading-relax);
  color: var(--spawn-foreground);
}
.spawn-body-lg {
  font-size: var(--spawn-text-base);
  line-height: var(--spawn-leading-relax);
  color: var(--spawn-foreground);
}
.spawn-muted {
  color: var(--spawn-muted-foreground);
}
.spawn-eyebrow {
  font-size: var(--spawn-text-xs);
  font-weight: var(--spawn-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--spawn-tracking-wide);
  color: var(--spawn-muted-foreground);
}
.spawn-metric {
  font-size: var(--spawn-text-2xl);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.spawn-mono {
  font-family: var(--spawn-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
}