/* ============================================================
   Vizit · Foundations · colors_and_type.css
   The single source of truth for color + type tokens.
   Import this in any artifact built with the Vizit brand.
   ============================================================ */

/* ---- Webfonts (self-host the four Google fonts in production) ---- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700;1,9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---------- BASE COLOR TOKENS ---------- */
  --vz-orange:        #FF5C2E;   /* primary · series 1 */
  --vz-cobalt:        #2540FF;   /* anchor  · series 2 */
  --vz-lime:          #C6FF3D;   /* energy  · series 3 */
  --vz-pink:          #FF6FB5;   /* soft    · series 4 */
  --vz-cream:         #F4EFE4;   /* default ground (never pure white) */
  --vz-cream-deep:    #ECE5D3;   /* secondary ground · cards */
  --vz-cream-deeper:  #E2DAC4;   /* tertiary ground · panels */
  --vz-ink:           #0F0F12;   /* type, strokes, axes */

  /* ink alphas — for borders, captions, dividers */
  --vz-ink-60: rgba(15,15,18,.6);
  --vz-ink-40: rgba(15,15,18,.4);
  --vz-ink-15: rgba(15,15,18,.15);
  --vz-ink-08: rgba(15,15,18,.08);

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg:           var(--vz-cream);
  --bg-deep:      var(--vz-cream-deep);
  --fg:           var(--vz-ink);
  --fg-muted:     var(--vz-ink-60);
  --fg-subtle:    var(--vz-ink-40);
  --stroke:       var(--vz-ink);
  --hairline:     var(--vz-ink-15);
  --accent:       var(--vz-orange);   /* CTAs, primary series */
  --link:         var(--vz-cobalt);
  --highlight:    var(--vz-lime);     /* match moments, success */
  --alt:          var(--vz-pink);

  /* Locked chart series order — never improvise */
  --series-1: var(--vz-orange);
  --series-2: var(--vz-cobalt);
  --series-3: var(--vz-lime);
  --series-4: var(--vz-pink);

  /* ---------- TYPE STACKS ---------- */
  --vz-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --vz-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --vz-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
  --vz-hand:    'Caveat', 'Comic Sans MS', cursive;

  /* ---------- TYPE SCALE (semantic) ----------
     Roles map to brand voice:
     - h1 / h2: Fraunces 900 + italic 400 for emphasis word
     - body:    Inter 400/500
     - eyebrow: Mono uppercase, 0.12em tracking
     - data:    Mono regular
     - hand:    Caveat — annotations only */
  --h1-size: clamp(56px, 9vw, 128px);
  --h1-line: .88;
  --h1-track: -.03em;

  --h2-size: clamp(36px, 5vw, 64px);
  --h2-line: .95;
  --h2-track: -.02em;

  --h3-size: clamp(26px, 2.6vw, 36px);
  --h3-line: 1;
  --h3-track: -.02em;

  --h4-size: 22px;
  --h4-line: 1.1;
  --h4-track: -.01em;

  --body-lg-size: 18px;
  --body-lg-line: 1.55;

  --body-size: 15px;
  --body-line: 1.55;

  --body-sm-size: 13px;
  --body-sm-line: 1.5;

  --mono-size: 13px;
  --eyebrow-size: 11px;
  --eyebrow-track: .12em;
  --caption-size: 10px;
  --caption-track: .08em;

  --hand-size: 28px;

  /* ---------- RADII (soft pebble) ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Signature blob radius (pebble default) */
  --r-blob: 62% 38% 55% 45% / 50% 60% 40% 50%;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- STROKES ---------- */
  --stroke-hair:  1px;     /* borders, dividers */
  --stroke-data:  1.5px;   /* charts, buttons */
  --stroke-bold:  2px;     /* dashed dropzones, drafts */

  /* ---------- ELEVATION (no blur — use stamp shadow) ---------- */
  --shadow-stamp: 4px 4px 0 var(--vz-ink);
  --shadow-stamp-sm: 2px 2px 0 var(--vz-ink);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --d-fast: .12s;
  --d-base: .25s;
  --d-slow: .6s;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Drop colors_and_type.css into a page and headlines, body,
   code, and links inherit Vizit defaults automatically.
   ============================================================ */

html, body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--vz-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--vz-lime); color: var(--vz-ink); }

h1, .vz-h1{
  font-family: var(--vz-display);
  font-weight: 900;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-track);
}
h1 em, .vz-h1 em { font-style: italic; font-weight: 400; }

h2, .vz-h2{
  font-family: var(--vz-display);
  font-weight: 900;
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
}
h2 em, .vz-h2 em { font-style: italic; font-weight: 400; }

h3, .vz-h3{
  font-family: var(--vz-display);
  font-weight: 900;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
}
h3 em, .vz-h3 em { font-style: italic; font-weight: 400; }

h4, .vz-h4{
  font-family: var(--vz-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  letter-spacing: var(--h4-track);
}

p, .vz-body{
  font-family: var(--vz-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
}

.vz-body-lg{ font-size: var(--body-lg-size); line-height: var(--body-lg-line); }
.vz-body-sm{ font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--fg-muted); }

code, kbd, pre, .vz-mono{
  font-family: var(--vz-mono);
  font-size: var(--mono-size);
}

.vz-eyebrow{
  font-family: var(--vz-mono);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.vz-caption{
  font-family: var(--vz-mono);
  font-size: var(--caption-size);
  letter-spacing: var(--caption-track);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.vz-hand{
  font-family: var(--vz-hand);
  font-size: var(--hand-size);
  color: var(--vz-cobalt);
  line-height: 1.05;
}

a, .vz-link{
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover{ text-decoration: underline; }

/* The signature blob — drop in anywhere via .vz-blob */
.vz-blob{
  display: inline-block;
  width: 1em; height: 1em;
  background: var(--vz-orange);
  border: var(--stroke-hair) solid var(--vz-ink);
  border-radius: var(--r-blob);
  transform: rotate(-12deg);
}
.vz-blob.cobalt { background: var(--vz-cobalt); }
.vz-blob.lime   { background: var(--vz-lime); }
.vz-blob.pink   { background: var(--vz-pink); }
.vz-blob.ink    { background: var(--vz-ink); }