/* ============================================================
   ANIMA DATA — Colors & Type
   The atomic visual layer. Everything downstream references these.
   ============================================================ */

/* ---- Webfonts (Google Fonts substitutes — see README font notes) ---- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ===== Brand core ===== */
  --teal:        #1D9E75;   /* primary — credible, alive, "data is breathing" */
  --teal-deep:   #14704F;   /* pressed / dense fills */
  --teal-soft:   #2EB890;   /* hover on dark */

  --coral:       #D85A30;   /* accent — emotion, CTAs, highlights */
  --coral-deep:  #B0431F;   /* pressed */
  --coral-soft:  #E87B57;   /* hover on dark */

  --ink:         #0D0D0D;   /* near-black, backgrounds + body text on light */
  --ink-2:       #1A1A1A;   /* raised dark surface */
  --ink-3:       #262626;   /* card on dark */

  --cream:       #F5F2EC;   /* warm cream — light bg + secondary text on dark */
  --cream-2:     #ECE7DC;   /* second surface light */
  --cream-3:     #DDD6C5;   /* hairline / divider light */

  /* ===== Foreground tokens (semantic) ===== */
  /* On dark surfaces */
  --fg-on-dark-1: var(--cream);                  /* primary text */
  --fg-on-dark-2: rgba(245, 242, 236, 0.72);     /* secondary */
  --fg-on-dark-3: rgba(245, 242, 236, 0.48);     /* tertiary / metadata */
  --fg-on-dark-4: rgba(245, 242, 236, 0.22);     /* disabled */

  /* On light surfaces */
  --fg-on-light-1: var(--ink);
  --fg-on-light-2: rgba(13, 13, 13, 0.68);
  --fg-on-light-3: rgba(13, 13, 13, 0.44);
  --fg-on-light-4: rgba(13, 13, 13, 0.22);

  /* ===== Background tokens ===== */
  --bg-dark:       var(--ink);
  --bg-dark-2:     var(--ink-2);
  --bg-dark-3:     var(--ink-3);

  --bg-light:      var(--cream);
  --bg-light-2:    var(--cream-2);

  /* ===== Border / hairline ===== */
  --hairline-on-dark:  rgba(245, 242, 236, 0.12);
  --hairline-on-light: rgba(13, 13, 13, 0.12);
  --hairline-strong-on-dark:  rgba(245, 242, 236, 0.28);
  --hairline-strong-on-light: rgba(13, 13, 13, 0.28);

  /* ===== Semantic state ===== */
  --success: var(--teal);
  --warning: #E0A23C;
  --danger:  var(--coral);
  --info:    #5BA8C9;       /* used sparingly — secondary accent */

  /* ===== Type families ===== */
  --font-display: 'Instrument Serif', 'GT Sectra', 'Iowan Old Style', Georgia, serif;
  --font-body:    'IBM Plex Sans', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ===== Type scale (1.250 — major third, set for editorial rhythm) ===== */
  --fs-display-xl: clamp(64px, 9vw, 144px);   /* hero, one-word moments */
  --fs-display-l:  clamp(48px, 6vw, 96px);    /* page openers */
  --fs-display-m:  clamp(36px, 4.5vw, 64px);  /* section headers */
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    19px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      11px;     /* eyebrow / label */

  /* ===== Line-heights ===== */
  --lh-display: 1.02;
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* ===== Tracking ===== */
  --tr-display: -0.02em;     /* serif tightens slightly */
  --tr-tight:   -0.01em;
  --tr-normal:   0;
  --tr-eyebrow:  0.14em;     /* uppercase eyebrows / labels */

  /* ===== Weights ===== */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ===== Spacing scale (4px base) ===== */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ===== Radii — tight, editorial, not rounded-tech ===== */
  --r-0:  0;
  --r-1:  2px;        /* chips, tags */
  --r-2:  4px;        /* inputs */
  --r-3:  6px;        /* buttons, cards */
  --r-4:  12px;       /* feature cards */
  --r-pill: 999px;

  /* ===== Shadows — soft, low, "lift off paper" ===== */
  --shadow-1: 0 1px 2px rgba(13, 13, 13, 0.06), 0 1px 1px rgba(13, 13, 13, 0.04);
  --shadow-2: 0 4px 14px rgba(13, 13, 13, 0.08), 0 2px 4px rgba(13, 13, 13, 0.04);
  --shadow-3: 0 16px 40px rgba(13, 13, 13, 0.16), 0 4px 8px rgba(13, 13, 13, 0.06);
  --shadow-coral-glow: 0 0 0 1px rgba(216, 90, 48, 0.4), 0 6px 24px rgba(216, 90, 48, 0.22);

  /* ===== Motion — slow, considered, "documentary" pacing ===== */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);     /* default for entrances */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:     cubic-bezier(0.5, 1.4, 0.5, 1);     /* used sparingly */
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      480ms;
  --dur-cinematic: 900ms;   /* for data reveals */
}

/* ============================================================
   SEMANTIC ELEMENTS
   Base typography defaults. Designs can opt-in with .prose etc.
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-on-light-1);
  background: var(--bg-light);
  font-feature-settings: "ss01", "cv11";  /* IBM Plex stylistic alternates */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.dark, .dark-surface {
  background: var(--bg-dark);
  color: var(--fg-on-dark-1);
}

h1, h2, h3, h4, .display, .headline {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);   /* Instrument Serif sits at 400 */
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  color: inherit;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-family: var(--font-body); font-weight: var(--fw-semi); letter-spacing: var(--tr-tight); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-family: var(--font-body); font-weight: var(--fw-semi); letter-spacing: var(--tr-tight); }

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.display-l  { font-family: var(--font-display); font-size: var(--fs-display-l);  line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.display-m  { font-family: var(--font-display); font-size: var(--fs-display-m);  line-height: var(--lh-display); letter-spacing: var(--tr-display); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); }
.lead    { font-size: var(--fs-body-lg); line-height: var(--lh-snug); color: var(--fg-on-light-2); }
.small   { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-on-light-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--coral);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "zero", "ss02";
}

.italic-serif {
  font-family: var(--font-display);
  font-style: italic;        /* Instrument Serif italic is the brand's "voice" gesture */
}

/* ============================================================
   UTILITY HELPERS
   ============================================================ */
.hairline-t { border-top: 1px solid var(--hairline-on-light); }
.hairline-b { border-bottom: 1px solid var(--hairline-on-light); }
.dark-surface .hairline-t { border-top-color: var(--hairline-on-dark); }
.dark-surface .hairline-b { border-bottom-color: var(--hairline-on-dark); }