/* ============================================================
   Doodleblue Design System — Core Tokens
   Colors + Type — import this first.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color tokens ---------- */
  /* Brand */
  --color-brand:        #1D41F7;  /* primary blue */
  --color-brand-soft:   #C3CEF7;  /* tinted blue / secondary */
  --color-brand-ink:    #0E1F8A;  /* darker pressed/text-on-soft */
  --color-brand-wash:   #EEF1FE;  /* very-light blue background wash */

  /* Neutrals */
  --color-ink:          #0A0A0A;  /* primary text */
  --color-ink-2:        #3A3A3A;  /* secondary text */
  --color-ink-3:        #6E6E6E;  /* tertiary / captions */
  --color-line:         #E6E1D4;  /* hairline on cream */
  --color-line-strong:  #0A0A0A;  /* heavy outline (doodle aesthetic) */

  /* Surfaces */
  --color-bg:           #FAF7F0;  /* cream — default background */
  --color-bg-2:         #F2EEDF;  /* slightly deeper cream */
  --color-surface:      #FFFFFF;  /* white card */
  --color-surface-ink:  #0A0A0A;  /* dark inversion surface */

  /* Semantic */
  --color-success:      #1F8A5B;
  --color-warning:      #C77A1B;
  --color-danger:       #C0392B;
  --color-info:         var(--color-brand);

  /* Foreground aliases (semantic) */
  --fg-1: var(--color-ink);
  --fg-2: var(--color-ink-2);
  --fg-3: var(--color-ink-3);
  --fg-brand: var(--color-brand);
  --fg-on-brand: var(--color-bg);     /* cream on blue */
  --fg-on-soft: var(--color-brand);   /* blue on brand-soft */

  /* ---------- Type tokens ---------- */
  --font-serif: "Instrument Serif", "Libre Baskerville", "Iowan Old Style", Georgia, serif;
  --font-sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale (display = serif; ui = sans) */
  --text-display-1: clamp(56px, 9vw, 128px);
  --text-display-2: clamp(44px, 6vw, 88px);
  --text-h1: clamp(36px, 4vw, 64px);
  --text-h2: clamp(28px, 3vw, 44px);
  --text-h3: 28px;
  --text-h4: 22px;
  --text-lead: 20px;
  --text-body: 17px;
  --text-small: 14px;
  --text-micro: 12px;

  --leading-tight: 1.02;
  --leading-snug:  1.15;
  --leading-body:  1.55;
  --leading-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-cap: 0.12em;

  /* ---------- Spacing / radii / shadows ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--color-line);
  --border-ink:      1.5px solid var(--color-ink);
  --border-ink-2:    2px solid var(--color-ink);

  --shadow-card:  0 1px 0 rgba(10,10,10,0.04), 0 12px 28px -16px rgba(10,10,10,0.18);
  --shadow-pop:   0 2px 0 rgba(10,10,10,0.06), 0 30px 60px -30px rgba(10,10,10,0.32);
  --shadow-stamp: 4px 4px 0 var(--color-ink);     /* offset block shadow */
  --shadow-stamp-brand: 4px 4px 0 var(--color-brand);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.4);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ---------- Base ---------- */
html, body {
  background: var(--color-bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type classes ---------- */
.t-display-1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display-2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h1, .t-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  margin: 0;
}
.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--fg-2);
}
p, .t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.t-small {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--fg-2);
}
.t-micro {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  line-height: 1.4;
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
}
code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.94em;
  background: var(--color-brand-wash);
  padding: 0.08em 0.32em;
  border-radius: var(--radius-xs);
  color: var(--color-brand-ink);
}