/* ============================================================================
   rrflows design tokens
   Light UI . Modern slate-navy accent . Geometric sans + clean sans
   Source of truth: DESIGN.md (YAML frontmatter mirrors these values)
   ============================================================================ */

/* Type loading - Google Fonts allowlist (WordPress.com Atomic compatible) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ──────────────────────────────────────────────────────────────────────────
     COLOR
     ────────────────────────────────────────────────────────────────────────── */

  /* Canvas + surface */
  --color-bg:              #F9F6EE;        /* light warm cream, sits closer to the white cards */
  --color-surface:         #F3EFE3;        /* deeper warm inset surface */
  --color-surface-strong:  #ECE6D7;        /* deepest inset, e.g. comparison block */
  --color-card:            #FFFFFF;        /* white card surface, lifts content off the cream */

  /* Ink (text) - alpha tiers from a single near-black base */
  --color-ink:             #0F172A;        /* 100% - headlines, strong copy */
  --color-ink-72:          rgba(15, 23, 42, 0.72);  /* 72% - secondary copy */
  --color-ink-56:          rgba(15, 23, 42, 0.56);  /* 56% - tertiary copy */
  --color-ink-40:          rgba(15, 23, 42, 0.40);  /* 40% - muted, captions */

  /* Accent - modern slate-navy, used surgically */
  --color-accent:          #1E3A5F;        /* primary CTAs, hero accent words, links */
  --color-accent-hover:    #14306B;        /* hover state on filled CTAs */
  --color-accent-soft:     rgba(30, 58, 95, 0.08);  /* hover bg on ghost buttons */

  /* Borders - hairline alphas for section dividers */
  --color-border:          rgba(15, 23, 42, 0.08);  /* default hairline */
  --color-border-strong:   rgba(15, 23, 42, 0.16);  /* emphasized boundary */

  /* Status (reserved for genuine semantic state, never decorative) */
  --color-success:         #16A34A;
  --color-warning:         #D97706;
  --color-error:           #DC2626;

  /* ──────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────────────────────────────────── */

  /* Family - starter pairing. Claude Design may propose alternatives within the allowlist. */
  /* Display allowlist: Geist, Inter (body fallback only), system geometric sans */
  /* Body allowlist:    Inter, Manrope, Plus Jakarta Sans */
  --font-display:          'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:             'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:             'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-display:            clamp(3rem, 6vw + 1rem, 4.75rem);     /* hero H1, ~76px desktop */
  --fs-h1:                 clamp(2.25rem, 4vw + 0.5rem, 3.25rem); /* major section H2 */
  --fs-h2:                 clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);
  --fs-h3:                 1.5rem;
  --fs-h4:                 1.25rem;
  --fs-body-lead:          1.125rem;       /* hero supporting copy */
  --fs-body:               1rem;
  --fs-body-sm:            0.875rem;
  --fs-caption:            0.75rem;

  /* Line height */
  --lh-display:            1.0;            /* tight, dramatic */
  --lh-tight:              1.15;           /* H1/H2 */
  --lh-body:               1.5;
  --lh-loose:              1.625;

  /* Letter-spacing */
  --ls-display:            -0.02em;        /* -1.5px equivalent on 76px */
  --ls-h1:                 -0.015em;
  --ls-body:               0;
  --ls-caps:               0.08em;         /* uppercase kickers */

  /* Weight */
  --fw-regular:            400;
  --fw-medium:             500;
  --fw-bold:               700;
  --fw-display:            800;            /* hero, major H2 */

  /* ──────────────────────────────────────────────────────────────────────────
     SPACING - 4px base
     ────────────────────────────────────────────────────────────────────────── */

  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-7:               28px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-16:              64px;
  --space-20:              80px;
  --space-24:              96px;          /* standard section padding */
  --space-32:              128px;
  --space-40:              160px;         /* hero / final CTA section padding */

  /* ──────────────────────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────────────────────── */

  --max-w-prose:           65ch;          /* reading column */
  --max-w-content:         1200px;        /* body section max */
  --max-w-hero:            1080px;        /* hero / focused section max */
  --max-w-page:            1440px;        /* page outer max */

  --container-pad:         var(--space-6);  /* 24px gutter mobile */
  --container-pad-md:      var(--space-12); /* 48px gutter tablet+ */
  --container-pad-lg:      var(--space-16); /* 64px gutter desktop+ */

  --nav-height:            72px;            /* fixed-nav reservation height */

  /* ──────────────────────────────────────────────────────────────────────────
     RADIUS
     ────────────────────────────────────────────────────────────────────────── */

  --radius-sm:             4px;
  --radius-md:             8px;            /* buttons, inputs */
  --radius-lg:             12px;           /* cards */
  --radius-xl:             16px;           /* featured cards */
  --radius-pill:           9999px;         /* tag chips, status badges only */

  /* ──────────────────────────────────────────────────────────────────────────
     SHADOW - flat-with-borders + soft elevation
     ────────────────────────────────────────────────────────────────────────── */

  --shadow-sm:             0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:             0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg:             0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-cta:            0 4px 12px rgba(30, 58, 95, 0.16);  /* slate-navy cast */

  /* ──────────────────────────────────────────────────────────────────────────
     MOTION
     ────────────────────────────────────────────────────────────────────────── */

  --duration-fast:         0.15s;
  --duration-base:         0.30s;
  --duration-slow:         0.60s;

  --ease-standard:         cubic-bezier(0.4, 0, 0.2, 1);   /* Tailwind default */
  --ease-out:              cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:               cubic-bezier(0.4, 0, 1, 1);

  --transition-base:       all var(--duration-base) var(--ease-standard);
  --transition-color:      color var(--duration-base) var(--ease-standard),
                           background-color var(--duration-base) var(--ease-standard),
                           border-color var(--duration-base) var(--ease-standard);

  /* ──────────────────────────────────────────────────────────────────────────
     BREAKPOINTS (reference values - use in @media queries)
     ────────────────────────────────────────────────────────────────────────── */

  --bp-sm:                 375px;          /* mobile baseline */
  --bp-md:                 768px;          /* tablet */
  --bp-lg:                 1024px;
  --bp-xl:                 1280px;         /* desktop baseline */
}

/* Reduced-motion fallback - WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:       0.01ms;
    --duration-base:       0.01ms;
    --duration-slow:       0.01ms;
  }
  *,
  *::before,
  *::after {
    animation-duration:    0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:   0.01ms !important;
    scroll-behavior:       auto !important;
  }
}

/* Base body style anchored to tokens */
body {
  background:              var(--color-bg);
  color:                   var(--color-ink);
  font-family:             var(--font-body);
  font-size:               var(--fs-body);
  line-height:             var(--lh-body);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family:             var(--font-display);
  font-weight:             var(--fw-display);
  letter-spacing:          var(--ls-h1);
  line-height:             var(--lh-tight);
  color:                   var(--color-ink);
}

h1 {
  font-size:               var(--fs-display);
  line-height:             var(--lh-display);
  letter-spacing:          var(--ls-display);
}