/* ============================================================
   TruLata — Design Tokens
   Brand kit: backend/assets/brand/trulata/brand.json
   ============================================================ */

/* ---- Fonts (self-hosted) ---- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-700.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-800.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-400.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-500.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-600.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---- Palette (brand.json) ---- */
  --ink: #282a2b;          /* charcoal */
  --paper: #ffffff;
  --accent: #4cd1f4;       /* sky blue */
  --primary: #3a43ad;      /* royal blue */
  --secondary: #9a3fc1;    /* purple */
  --warm: #ffc861;         /* warm gold accent — use on dark (charcoal) */
  --warm-deep: #c2820f;    /* deep amber — warm accent on light, contrast-safe */

  /* ink ramp for dark sections */
  --ink-900: #1c1e1f;
  --ink-800: #232526;
  --ink-700: #2f3133;
  --ink-600: #3c3f41;

  /* paper ramp for light sections */
  --paper-50: #f7f8fb;
  --paper-100: #eef1f6;
  --line: #e4e8f0;

  /* text */
  --text-on-dark: rgba(255,255,255,0.94);
  --text-on-dark-dim: rgba(255,255,255,0.74);
  --text-on-light: #2a2d30;
  --text-on-light-dim: #5b6168;

  /* ---- Signature gradient ---- */
  --grad: linear-gradient(110deg, #9a3fc1 0%, #3a43ad 52%, #4cd1f4 100%);
  --grad-soft: linear-gradient(110deg, #b46ad6 0%, #5560c9 52%, #6fdcf6 100%);
  /* brighter stops for gradient TEXT on dark charcoal (readability) */
  --grad-bright: linear-gradient(105deg, #c98ee6 0%, #8b94f0 48%, #6fe0fb 100%);
  --grad-conic: conic-gradient(from 210deg at 50% 50%, #9a3fc1, #3a43ad, #4cd1f4, #9a3fc1);

  /* ---- Typography ---- */
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Geist Mono", Menlo, monospace;

  /* fluid type scale */
  --fs-hero: clamp(2.7rem, 7.2vw, 6rem);
  --fs-h1: clamp(2.2rem, 5vw, 3.8rem);
  --fs-h2: clamp(1.8rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9rem;
  --fs-eyebrow: 0.78rem;

  /* ---- Spacing / layout ---- */
  --maxw: 1200px;
  --maxw-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 11vh, 9rem);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* ---- Effects ---- */
  --shadow-card: 0 24px 60px -28px rgba(40,42,43,0.32);
  --shadow-glow: 0 0 80px -10px rgba(76,209,244,0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}