/* ============================================================
   SUPER VISION — Design Tokens
   Warm earthy palette, rounded friendly sans, zen minimal
   ============================================================ */

/* ---- Fonts (Google Fonts fallbacks; flagged in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============== COLORS ============== */

  /* Base surfaces — warm paper / stone */
  --sv-bg:            #F5F1E8;   /* page background, warm off-white */
  --sv-bg-elev-1:     #FBF8F1;   /* raised surface (cards, panels) */
  --sv-bg-elev-2:     #FFFFFF;   /* highest surface (popovers, modals) */
  --sv-bg-sunken:     #EDE7D9;   /* sunken wells, code blocks */

  /* Ink — warm slate, never pure black */
  --sv-fg-1:          #2A2E28;   /* primary text */
  --sv-fg-2:          #4A4F48;   /* secondary text */
  --sv-fg-3:          #7A7F75;   /* muted / captions */
  --sv-fg-4:          #A8ABA1;   /* disabled / placeholder */
  --sv-fg-inverse:    #FBF8F1;   /* text on dark backgrounds */

  /* Borders / dividers */
  --sv-line-1:        #E4DDCB;   /* default border */
  --sv-line-2:        #D4CBB3;   /* emphasized border */
  --sv-line-3:        #C3B89A;   /* input hover / focus ring base */

  /* Brand accent — the orange dot */
  --sv-accent:        #E25A2C;   /* primary accent (logo dot) */
  --sv-accent-hover:  #C94A1F;
  --sv-accent-press:  #A83D18;
  --sv-accent-tint:   #FBE5DA;   /* subtle tint bg */
  --sv-accent-ring:   rgba(226, 90, 44, 0.28);

  /* Earthy extended — sage, sand, clay */
  --sv-sage:          #6B7F5E;   /* calm secondary, nature */
  --sv-sage-tint:     #E3E7DC;
  --sv-sand:          #C9A87C;   /* warm neutral highlight */
  --sv-sand-tint:     #F1E7D4;
  --sv-clay:          #A85A3C;   /* muted warm */
  --sv-clay-tint:     #F2DED3;

  /* Semantic (earthy, desaturated) */
  --sv-ok:            #5E8F5E;
  --sv-ok-tint:       #DBE7D6;
  --sv-warn:          #C89846;
  --sv-warn-tint:     #F4E6C5;
  --sv-err:           #B33A2E;
  --sv-err-tint:      #F2D9D5;
  --sv-info:          #5A7E8F;
  --sv-info-tint:     #D8E3E8;

  /* Dark mode (reserved; not primary) */
  --sv-dark-bg:       #1F211D;
  --sv-dark-fg:       #EFEADB;


  /* ============== TYPOGRAPHY ============== */

  /* Families — rounded sans for UI, mono for data */
  --sv-font-sans:     'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --sv-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sv-font-display:  'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* tight tracking, heavy weights */

  /* Scale — 1.25 modular-ish, slightly compressed */
  --sv-text-2xs: 11px;
  --sv-text-xs:  12px;
  --sv-text-sm:  13px;
  --sv-text-md:  15px;   /* body default */
  --sv-text-lg:  17px;
  --sv-text-xl:  20px;
  --sv-text-2xl: 24px;
  --sv-text-3xl: 30px;
  --sv-text-4xl: 38px;
  --sv-text-5xl: 48px;
  --sv-text-6xl: 64px;

  /* Weights */
  --sv-w-regular:  400;
  --sv-w-medium:   500;
  --sv-w-semibold: 600;
  --sv-w-bold:     700;
  --sv-w-heavy:    800;

  /* Line heights */
  --sv-lh-tight:   1.15;
  --sv-lh-snug:    1.3;
  --sv-lh-normal:  1.5;
  --sv-lh-relaxed: 1.65;

  /* Tracking */
  --sv-track-tight:  -0.015em;
  --sv-track-normal: 0;
  --sv-track-wide:   0.04em;
  --sv-track-caps:   0.08em;


  /* ============== SPACING ============== */
  --sv-s-0:  0;
  --sv-s-1:  4px;
  --sv-s-2:  8px;
  --sv-s-3:  12px;
  --sv-s-4:  16px;
  --sv-s-5:  20px;
  --sv-s-6:  24px;
  --sv-s-8:  32px;
  --sv-s-10: 40px;
  --sv-s-12: 48px;
  --sv-s-16: 64px;
  --sv-s-20: 80px;
  --sv-s-24: 96px;


  /* ============== RADII ============== */
  --sv-r-xs:   4px;
  --sv-r-sm:   8px;
  --sv-r-md:   12px;   /* default for inputs, small cards */
  --sv-r-lg:   16px;   /* cards */
  --sv-r-xl:   22px;   /* feature panels */
  --sv-r-2xl:  28px;
  --sv-r-full: 9999px; /* pills, dot, avatars */


  /* ============== SHADOWS ============== */
  /* Warm-tinted, soft, never harsh black */
  --sv-shadow-0: none;
  --sv-shadow-1: 0 1px 0 rgba(60, 40, 20, 0.04), 0 1px 2px rgba(60, 40, 20, 0.06);
  --sv-shadow-2: 0 2px 4px rgba(60, 40, 20, 0.06), 0 4px 10px rgba(60, 40, 20, 0.06);
  --sv-shadow-3: 0 6px 16px rgba(60, 40, 20, 0.08), 0 2px 4px rgba(60, 40, 20, 0.05);
  --sv-shadow-4: 0 18px 40px rgba(60, 40, 20, 0.12), 0 4px 10px rgba(60, 40, 20, 0.06);
  --sv-shadow-inset: inset 0 1px 2px rgba(60, 40, 20, 0.06);
  --sv-focus-ring: 0 0 0 3px var(--sv-accent-ring);


  /* ============== MOTION ============== */
  --sv-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --sv-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --sv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sv-ease-soft:   cubic-bezier(0.4, 0.0, 0.2, 1); /* the zen default */

  --sv-dur-fast:   120ms;
  --sv-dur-base:   200ms;
  --sv-dur-slow:   360ms;
  --sv-dur-long:   640ms;
}


/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Load this stylesheet and get opinionated type baked in.
   ============================================================ */

html, body {
  background: var(--sv-bg);
  color: var(--sv-fg-1);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-md);
  line-height: var(--sv-lh-normal);
  font-weight: var(--sv-w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sv-font-display);
  color: var(--sv-fg-1);
  letter-spacing: var(--sv-track-tight);
  line-height: var(--sv-lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--sv-text-5xl); font-weight: var(--sv-w-heavy); }
h2 { font-size: var(--sv-text-3xl); font-weight: var(--sv-w-bold); }
h3 { font-size: var(--sv-text-2xl); font-weight: var(--sv-w-bold); }
h4 { font-size: var(--sv-text-xl);  font-weight: var(--sv-w-semibold); }
h5 { font-size: var(--sv-text-lg);  font-weight: var(--sv-w-semibold); }
h6 { font-size: var(--sv-text-md);  font-weight: var(--sv-w-semibold); letter-spacing: var(--sv-track-caps); text-transform: uppercase; color: var(--sv-fg-3); }

p {
  margin: 0;
  color: var(--sv-fg-1);
  line-height: var(--sv-lh-relaxed);
  text-wrap: pretty;
}

small, .sv-caption {
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-3);
  letter-spacing: var(--sv-track-wide);
}

.sv-eyebrow {
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-w-semibold);
  letter-spacing: var(--sv-track-caps);
  text-transform: uppercase;
  color: var(--sv-accent);
}

.sv-display {
  font-family: var(--sv-font-display);
  font-size: var(--sv-text-6xl);
  font-weight: var(--sv-w-heavy);
  letter-spacing: var(--sv-track-tight);
  line-height: var(--sv-lh-tight);
}

code, pre, kbd, samp {
  font-family: var(--sv-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--sv-bg-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--sv-r-xs);
  color: var(--sv-fg-1);
}

a {
  color: var(--sv-accent);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--sv-dur-fast) var(--sv-ease-soft);
}
a:hover { color: var(--sv-accent-hover); text-decoration: underline; }

hr {
  border: 0;
  height: 1px;
  background: var(--sv-line-1);
  margin: var(--sv-s-8) 0;
}

::selection {
  background: var(--sv-accent-tint);
  color: var(--sv-fg-1);
}

:focus-visible {
  outline: none;
  box-shadow: var(--sv-focus-ring);
  border-radius: var(--sv-r-sm);
}