/* ============================================================
   TaleFin Design Tokens
   Single source of truth for colour, type, spacing & motion.
   Derived from the TaleFin Brand Guidelines + colour swatches.
   Change a value here and it updates across the whole site.
   ============================================================ */

:root {

  /* ---- Brand colour palette (exact swatch values) ---- */
  --tf-plum:    #70285F;  /* primary brand colour */
  --tf-blue:    #0095DC;  /* primary accent */
  --tf-green:   #5DE5DA;  /* secondary accent (mint) */
  --tf-peach:   #FF8E81;  /* secondary accent */
  --tf-violet:  #BAD9F1;  /* soft tint / backgrounds */
  --tf-yellow:  #FED618;  /* highlight / attention */

  /* ---- Plum scale (primary, for surfaces & hovers) ---- */
  --tf-plum-900: #4A1A3F;
  --tf-plum-700: #5C2150;
  --tf-plum-600: #70285F;  /* = --tf-plum */
  --tf-plum-400: #9A5B8B;
  --tf-plum-200: #D2B8CB;
  --tf-plum-050: #F3EAF0;

  /* ---- Neutrals / ink ---- */
  --tf-ink:     #1A1422;  /* near-black headings on light */
  --tf-body:    #3D3645;  /* body text */
  --tf-muted:   #6E6878;  /* secondary text */
  --tf-line:    #E6E2EA;  /* hairlines / borders */
  --tf-surface: #FFFFFF;  /* default page surface */
  --tf-surface-alt: #F7F5F9; /* alternating section bg */
  --tf-black:   #0E0E0E;

  /* ---- Semantic roles ---- */
  --tf-primary:        var(--tf-plum);
  --tf-primary-ink:    #FFFFFF;          /* text on plum */
  --tf-accent:         var(--tf-blue);
  --tf-highlight:      var(--tf-yellow);
  --tf-focus-ring:     var(--tf-blue);
  --tf-error:          #C0392B;
  --tf-success:        #1F8A70;

  /* ---- Typography ---- */
  --tf-font-head: "Garnett", "Garnett Medium", Georgia, serif;
  --tf-font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --tf-fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5rem);   /* hero headline */
  --tf-fs-h1:      clamp(2.25rem, 1.5rem + 3.6vw, 3.5rem);
  --tf-fs-h2:      clamp(1.75rem, 1.25rem + 2.4vw, 2.5rem);
  --tf-fs-h3:      clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);
  --tf-fs-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* intro paragraphs */
  --tf-fs-body:    1.0625rem;   /* 17px */
  --tf-fs-small:   0.875rem;
  --tf-fs-eyebrow: 0.8125rem;   /* section kicker labels */

  --tf-lh-tight:   1.08;
  --tf-lh-snug:    1.25;
  --tf-lh-body:    1.6;
  --tf-tracking-eyebrow: 0.12em;

  /* ---- Spacing scale (8px base) ---- */
  --tf-space-1:  0.25rem;
  --tf-space-2:  0.5rem;
  --tf-space-3:  0.75rem;
  --tf-space-4:  1rem;
  --tf-space-6:  1.5rem;
  --tf-space-8:  2rem;
  --tf-space-12: 3rem;
  --tf-space-16: 4rem;
  --tf-space-24: 6rem;
  --tf-space-32: 8rem;

  /* ---- Layout ---- */
  --tf-maxw:        1200px;   /* content container */
  --tf-maxw-narrow: 760px;    /* prose / text columns */
  --tf-gutter:      clamp(1.25rem, 4vw, 3rem);
  --tf-section-y:   clamp(3.5rem, 6vw, 7rem);

  /* ---- Radius & elevation ---- */
  --tf-radius-sm: 8px;
  --tf-radius:    16px;
  --tf-radius-lg: 28px;
  --tf-radius-pill: 999px;
  --tf-shadow-sm: 0 2px 8px rgba(74,26,63,0.06);
  --tf-shadow:    0 12px 32px rgba(74,26,63,0.10);
  --tf-shadow-lg: 0 24px 60px rgba(74,26,63,0.16);

  /* ---- Logo clear space (brand rule: keep clear) ---- */
  --tf-logo-clearspace: 1.25rem;

  /* ---- Motion (subtle, attention-drawing not distracting) ---- */
  --tf-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --tf-dur-fast:    160ms;
  --tf-dur:         320ms;
  --tf-dur-slow:    600ms;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root { --tf-dur-fast: 0ms; --tf-dur: 0ms; --tf-dur-slow: 0ms; }
}