/* =========================================================
   Devanta Digital — Design tokens
   Premium dark canvas, brand-derived green/gold/cyan.
   ========================================================= */

:root {
  /* Brand colors (from official SVG) */
  --brand-emerald: #19B36B;
  --brand-emerald-2: #16a263;
  --brand-emerald-hi: #2DD089;
  --brand-cyan: #37D5E7;
  --brand-cyan-hi: #5FE2F2;
  --brand-gold: #F5A524;
  --brand-bone: #F7F3EA;
  --brand-ink: #0C100E;

  /* Canvas — dark, slightly green-tinted */
  --bg: #0A0D0B;
  --bg-2: #0F1311;
  --bg-3: #141815;
  --surface: #161B18;
  --surface-2: #1A201D;
  --surface-3: #1F2622;
  --hairline: rgba(247, 243, 234, 0.08);
  --hairline-strong: rgba(247, 243, 234, 0.16);

  /* Text */
  --text: #ECEAE3;
  --text-mute: #A6AAA4;
  --text-dim: #767A75;
  --text-faint: #4A4D49;

  /* Accents (role colors) */
  --accent: var(--brand-emerald);
  --accent-hi: var(--brand-emerald-hi);
  --accent-2: var(--brand-cyan);
  --accent-3: var(--brand-gold);
  --on-accent: #04140B;

  /* Type — display & body, with mono for meta */
  --font-display: "Clash Display", "General Sans", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale */
  --t-eyebrow: 0.78rem;          /* 12.5px */
  --t-small: 0.875rem;           /* 14px */
  --t-body: 1rem;                /* 16px */
  --t-body-lg: 1.0625rem;        /* 17px */
  --t-lead: clamp(1.0625rem, 0.9rem + 0.5vw, 1.25rem);
  --t-h4: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --t-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);
  --t-hero: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  --t-display: clamp(3rem, 1.6rem + 6vw, 7rem);

  /* Spacing */
  --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;
  --section-y: clamp(72px, 6vw + 32px, 144px);

  /* Layout */
  --maxw: 1240px;
  --maxw-narrow: 880px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  /* Motion */
  --ease-out: cubic-bezier(.16,.84,.34,1);
  --ease-spring: cubic-bezier(.2,.9,.3,1.2);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
  --dur-4: 720ms;

  /* Shadows / glows */
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -28px rgba(0,0,0,.55);
  --glow-emerald: 0 0 0 1px rgba(25,179,107,.35), 0 12px 40px -10px rgba(25,179,107,.35);
  --glow-cyan: 0 0 0 1px rgba(55,213,231,.30), 0 12px 40px -10px rgba(55,213,231,.30);
  --ring: 0 0 0 3px rgba(45, 208, 137, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}