/* psyflo.com — design exploration · shared tokens
   Tokens trace back to Wave 0 tokens.css. The site uses a richer accent
   set than the app because marketing has more emotional permission. */

:root {
  /* Brand navy — psyflo wave 0 */
  --navy-50:  #EEF1F8;
  --navy-100: #DDE3F0;
  --navy-200: #C5CDDF;
  --navy-400: #7B8DBE;
  --navy-500: #5870A8;
  --navy-700: #303F87;
  --navy-900: #1E2A6B;
  --navy-950: #141C4A;

  /* Warm cream surface family — editorial direction */
  --cream-50:  #FBF8F2;
  --cream-100: #F6F1E8;
  --cream-200: #ECE4D2;
  --cream-300: #DFD3B7;
  --cream-500: #B8A580;

  /* Gold accent — patient warmth */
  --gold-50:  #FAF3E6;
  --gold-200: #ECD9B0;
  --gold-400: #C9A35E;
  --gold-500: #B8956A;
  --gold-600: #9C7B49;
  --gold-700: #7A5F36;

  /* Sage accent — clinician calm */
  --sage-50:  #EEF2EC;
  --sage-200: #C8D4C0;
  --sage-400: #8FA68E;
  --sage-500: #6F8A6E;
  --sage-700: #4A5E49;

  /* Indigo accent — confident SaaS */
  --indigo-50:  #EEF2FF;
  --indigo-200: #C7D2FE;
  --indigo-500: #6366F1;
  --indigo-700: #4338CA;

  /* Sky accent — patient calm */
  --sky-50:  #EEF4FB;
  --sky-200: #C2D8EB;
  --sky-500: #6F9DC6;
  --sky-700: #3F6E9C;

  /* Neutrals */
  --ink-950: #0A0A0A;
  --ink-900: #1A1A1A;
  --ink-800: #2A2A2A;
  --ink-700: #404040;
  --ink-600: #525252;
  --ink-500: #737373;
  --ink-400: #A3A3A3;
  --ink-300: #D4D4D8;
  --ink-200: #E4E4E7;
  --ink-100: #F4F4F5;
  --ink-50:  #FAFAFA;
  --white:   #FFFFFF;

  /* Functional, muted */
  --success: #2F8F4F;
  --warning: #CA8A04;
  --danger:  #C45050;

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px;

  /* Per-direction accent slot — set on each direction's root, used by
   * shared components (calculator, stat block, CTA buttons). */
  --accent-50:  var(--gold-50);
  --accent-200: var(--gold-200);
  --accent-500: var(--gold-500);
  --accent-700: var(--gold-700);

  /* Soft warm tinted band — alternating section background */
  --band: #F4EBD7;

  /* Headline font slot — flipped by tweak panel */
  --headline-font: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --headline-weight: 400;
  --headline-tracking: -0.015em;
  --body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Tweaks: accent swap (applied to the canvas root) */
[data-accent="gold"]    { --accent-50: var(--gold-50);    --accent-200: var(--gold-200);    --accent-500: var(--gold-500);   --accent-700: var(--gold-700); }
[data-accent="sage"]    { --accent-50: var(--sage-50);    --accent-200: var(--sage-200);    --accent-500: var(--sage-500);   --accent-700: var(--sage-700); }
[data-accent="indigo"]  { --accent-50: var(--indigo-50);  --accent-200: var(--indigo-200);  --accent-500: var(--indigo-500); --accent-700: var(--indigo-700); }
[data-accent="navy"]    { --accent-50: var(--navy-50);    --accent-200: var(--navy-200);    --accent-500: var(--navy-500);   --accent-700: var(--navy-900); }
[data-accent="mono"]    { --accent-50: var(--ink-100);    --accent-200: var(--ink-200);     --accent-500: var(--ink-700);    --accent-700: var(--ink-900); }

[data-headline="serif"] { --headline-font: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --headline-weight: 400; --headline-tracking: -0.015em; }
[data-headline="sans"]  { --headline-font: 'Inter', -apple-system, sans-serif; --headline-weight: 600; --headline-tracking: -0.025em; }

/* All directions inherit these reset basics */
.psyflo-site, .psyflo-site * { box-sizing: border-box; }
.psyflo-site {
  font-family: var(--body-font);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
.psyflo-site button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}
.psyflo-site a { color: inherit; text-decoration: none; }
.psyflo-site .headline {
  font-family: var(--headline-font);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-tracking);
  line-height: 1.05;
  text-wrap: balance;
}
.psyflo-site .serif {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}
.psyflo-site .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: 'tnum', 'zero';
}
.psyflo-site .tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Compact bar-chart for stat rows — used inside Linear & Editorial */
.psyflo-site .sparkbar { display: inline-flex; align-items: flex-end; gap: 2px; }
.psyflo-site .sparkbar > i { display: block; width: 3px; border-radius: 1px; background: currentColor; opacity: .6; }

/* Subtle sparkline path styling */
.psyflo-site .spark {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons — generic primary/secondary used across directions, but each
 * direction will style them further. */
.psyflo-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--r-md);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.psyflo-site .btn:hover { transform: translateY(-1px); }

/* Print mark / wordmark — used across all directions */
.psyflo-site .wordmark {
  font-family: var(--headline-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 22px;
  line-height: 1;
}
[data-headline="sans"] .psyflo-site .wordmark,
.psyflo-site [data-headline="sans"] .wordmark,
.wordmark[data-headline-locked="sans"] {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}