/* ============================================================
   ZIINC Design System — Tokens
   colors_and_type.css
   ============================================================ */

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

/* ------------------------------------------------------------
   1. CORE TOKENS — raw palette + scales
   ------------------------------------------------------------ */
:root {
  /* Bone / paper */
  --bone-50:  #FAFAF7;
  --bone-100: #F4F4EE;
  --bone-200: #E8E8E1;

  /* Zinc / graphite — the spine of the system */
  --zinc-50:   #F6F6F5;
  --zinc-100:  #ECECEA;
  --zinc-200:  #D9D9D5;
  --zinc-300:  #BDBDB7;
  --zinc-400:  #8E8E88;
  --zinc-500:  #6B6B66;
  --zinc-600:  #4A4A46;
  --zinc-700:  #2E2E2C;
  --zinc-800:  #1F1F1D;
  --zinc-850:  #181816;
  --zinc-900:  #121211;
  --zinc-950:  #0A0A09;

  /* Signal — the accent */
  --signal-300: #C8FAA1;
  --signal-400: #A6F26B;   /* primary accent */
  --signal-500: #7BD843;
  --signal-600: #4FA31E;

  /* Infrared — warning / destructive / editorial */
  --infrared-400: #FF7A66;
  --infrared-500: #FF5E47;
  --infrared-600: #D93B24;

  /* Functional secondaries (use sparingly) */
  --electric-500: #3D7BFF;
  --acid-500:     #E6FF4A;
  --violet-500:   #8A6BFF;

  /* Type families */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (px) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;

  /* Line heights */
  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* Letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-tighter:  -0.03em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-mono-cap:  0.08em;

  /* Spacing — 4px base */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* Radii */
  --r-2:   2px;
  --r-4:   4px;
  --r-8:   8px;
  --r-12:  12px;
  --r-pill: 9999px;

  /* Borders */
  --bw-1: 1px;
  --bw-2: 2px;

  /* Shadows */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --elev-2: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
  --elev-3: 0 24px 48px -12px rgba(0, 0, 0, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   80ms;
  --dur-base:  140ms;
  --dur-slow:  200ms;
}

/* ------------------------------------------------------------
   2. SEMANTIC TOKENS — light theme (default)
   ------------------------------------------------------------ */
:root {
  --bg:           var(--bone-50);
  --bg-elev:      #FFFFFF;
  --bg-sunken:    var(--bone-100);
  --surface:      #FFFFFF;
  --surface-2:    var(--bone-100);

  --fg-1:         var(--zinc-950);   /* primary text */
  --fg-2:         var(--zinc-700);   /* secondary text */
  --fg-3:         var(--zinc-500);   /* tertiary / metadata */
  --fg-4:         var(--zinc-400);   /* placeholder / disabled */
  --fg-on-accent: var(--zinc-950);

  --border-1:  var(--zinc-200);   /* hairline */
  --border-2:  var(--zinc-300);   /* emphatic */
  --border-strong: var(--zinc-700);

  --accent:       var(--signal-400);
  --accent-fg:    var(--zinc-950);
  --accent-hover: var(--signal-500);

  --warn:    var(--infrared-500);
  --warn-fg: #FFFFFF;
  --ok:      var(--signal-500);
  --info:    var(--electric-500);

  --focus-ring: var(--signal-400);
  --scrim:      rgba(10, 10, 9, 0.6);

  --grid-dot:   rgba(18, 18, 17, 0.10);
}

/* Dark theme — default for product/console */
[data-theme="dark"] {
  --bg:           var(--zinc-950);
  --bg-elev:      var(--zinc-900);
  --bg-sunken:    #050504;
  --surface:      var(--zinc-900);
  --surface-2:    var(--zinc-850);

  --fg-1:         var(--bone-50);
  --fg-2:         var(--zinc-300);
  --fg-3:         var(--zinc-400);
  --fg-4:         var(--zinc-500);
  --fg-on-accent: var(--zinc-950);

  --border-1:  var(--zinc-800);
  --border-2:  var(--zinc-700);
  --border-strong: var(--zinc-300);

  --accent:       var(--signal-400);
  --accent-fg:    var(--zinc-950);
  --accent-hover: var(--signal-300);

  --grid-dot:   rgba(246, 246, 245, 0.08);
}

/* ------------------------------------------------------------
   3. SEMANTIC TYPE — apply directly to elements
   ------------------------------------------------------------ */
.zi-display-1, .zi h1.display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}
.zi-h1, .zi h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.zi-h2, .zi h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.zi-h3, .zi h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.zi-h4, .zi h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.zi-body, .zi p, .zi {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.zi-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.zi-ui {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-13);
  line-height: 1.3;
  color: var(--fg-1);
}
.zi-mono, .zi code, .zi .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-2);
}
.zi-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-mono-cap);
  text-transform: uppercase;
  color: var(--fg-3);
}
.zi-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-12);
  color: var(--fg-3);
}

/* ------------------------------------------------------------
   4. RESET-LIGHT — when applying .zi-root to a container
   ------------------------------------------------------------ */
.zi-root {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   5. UTILITY — backdrop dot grid
   ------------------------------------------------------------ */
.zi-dotgrid {
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}
.zi-linegrid {
  background-image:
    linear-gradient(to right, var(--grid-dot) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-dot) 1px, transparent 1px);
  background-size: 48px 48px;
}