/* =========================================================================
   tokens.css — single source of truth for the GanttChart.AI design system
   Anthropic-style editorial aesthetic, tuned to the brand's refined purple.
   LOAD THIS FIRST in base.html (before modern.css and all other stylesheets).
   ========================================================================= */

/* ---- Self-hosted fonts (latin subset, variable — all weights in one file) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter-Variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Fraunces-Variable-latin.woff2') format('woff2');
}

:root {
  /* ---------- Warm-neutral foundation (warm, faint violet-grey undertone
     so the purple accent reads as native, not clay/yellow) ---------- */
  --bg:             #FAF9F6;  /* page canvas — warm paper, NOT pure white */
  --bg-sunken:      #F1F0EC;  /* alternating / deeper sections */
  --surface:        #F5F3EF;  /* cards, panels, chrome */
  --surface-raised: #FFFFFF;  /* modals / popovers only — used sparingly */

  --ink:            #1E1A22;  /* warm near-black: body + serif headings */
  --ink-soft:       #3A3340;  /* secondary headings / strong labels */
  --muted:          #6B6470;  /* captions, metadata, helper text */
  --muted-faint:    #9A93A0;  /* placeholders / disabled (decorative only) */

  --border:         #E6E2DB;  /* warm hairlines, dividers, card edges */
  --border-strong:  #D6D0C8;  /* input outlines, table rules, hover borders */

  /* ---------- Brand accent: refined purple (the brand hue, made coherent) ---------- */
  --accent:         #6A4C9C;  /* primary buttons, links, active nav */
  --accent-hover:   #59407F;  /* hover */
  --accent-active:  #4C3570;  /* pressed */
  --accent-tint:    #EFEAF6;  /* selected rows, badges, soft fills */
  --accent-tint-border: #DED2EC;
  --accent-ink:     #4A357A;  /* text/icons sitting ON the accent tint */
  --on-accent:      #FAF9F6;  /* label color on a solid accent button */

  /* ---------- Focus (split from accent so it stays visible on accent elements) ---------- */
  --focus-ring:      #6A4C9C;
  --focus-ring-soft: #DED2EC;

  /* ---------- SEPARATE semantic colors (never reuse the brand accent for these) ---------- */
  --error:    #C2362C;  --error-bg:   #FBE9E6;  --error-border: #F0C2BC;
  --success:  #4F7A4C;  --success-bg: #EAF0E6;
  --warning:  #B07A1E;  --warning-bg: #F6ECD8;
  --info:     #3E6B82;  --info-bg:    #E4EDF1;

  /* ---------- Radii (one scale — replaces the old 11-value zoo) ---------- */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 9999px;

  /* ---------- Shadows (warm-tinted, minimal — Anthropic-style restraint) ---------- */
  --shadow-sm: 0 1px 2px rgba(30, 26, 34, 0.05);
  --shadow-md: 0 4px 12px rgba(30, 26, 34, 0.07);
  --shadow-lg: 0 8px 24px rgba(30, 26, 34, 0.09);

  /* ---------- Spacing (8px scale) ---------- */
  --s-1: 8px;  --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px; --s-6: 64px;  --s-7: 96px;  --s-8: 128px;

  /* ---------- Typography ---------- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Legacy aliases — keep older var() references working AND fix the
     five broken bindings that ship today (--text-primary, --surface-color, etc.) ---------- */
  --primary:        var(--accent);
  --primary-hover:  var(--accent-hover);
  --purple:         var(--accent);
  --text-gray:      var(--muted);
  --border-gray:    var(--border);
  --text-primary:   var(--ink);
  --text-secondary: var(--muted);
  --surface-color:  var(--surface);
  --border-color:   var(--border);
  --primary-color:  var(--accent);
}

/* ---- Base layer: applied here so every page inherits it even before modern.css ---- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss03" 1; /* Inter: humanist l, single-storey a */
}

/* Headings share ink colour + tight metrics. Serif (Fraunces) is reserved for
   the display tier — h1/h2 and the section titles — so it reads as a deliberate
   editorial accent. h3 sub-headings stay in the sans (Inter), matching how
   Anthropic keeps serif to the display layer rather than every heading level. */
h1, h2, h3,
.hero-title, .section-title, .pricing-header h2, .home-faq-header h2,
.cta h2, .showcase-text h2 {
  font-optical-sizing: auto;
  color: var(--ink);
  letter-spacing: -0.018em;
  font-weight: 600;
  line-height: 1.12;
}
h1, h2,
.hero-title, .section-title, .pricing-header h2, .home-faq-header h2,
.cta h2, .showcase-text h2 {
  font-family: var(--font-serif);
}
h3 { font-family: var(--font-sans); }

/* Links inherit the accent by default */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* One consistent, always-visible keyboard focus ring across the whole app */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-tint); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}