/* ABOUTME: Design tokens for AI Grant Helper — palette, spacing, type, motion. */
/* ABOUTME: Loaded globally via base.html. Consumed by later PRs; no visible changes on its own. */

:root {
  /* ---------------------------------------------------------------
     Palette — raw values
     Mirrors the existing Tailwind config in templates/base.html.
     Semantic aliases below are what components should consume.
  --------------------------------------------------------------- */
  --palette-burgundy-50: #fdf2f2;
  --palette-burgundy-100: #fde8e8;
  --palette-burgundy-500: #a83232;
  --palette-burgundy-600: #8b1a1a;
  --palette-burgundy-700: #721515;
  --palette-burgundy-800: #5a1010;
  --palette-burgundy-900: #420c0c;

  --palette-navy-600: #1e3a5f;
  --palette-navy-700: #162d4a;
  --palette-navy-800: #0f2035;

  --palette-gold-50: #fdfaf0;
  --palette-gold-100: #faf3d6;
  --palette-gold-400: #d4af37;
  --palette-gold-500: #c9a030;
  --palette-gold-600: #b08a20;

  --palette-cream: #faf0e6;
  --palette-cream-soft: #f7ebdc;

  --palette-ink-900: #0f2035;
  --palette-ink-700: #162d4a;
  --palette-ink-500: #1e3a5f;
  --palette-ink-300: #62748a;
  --palette-ink-200: #94a1b3;

  /* Hairline tones — used for 1px dividers that should whisper, not shout. */
  --palette-rule-soft: rgba(15, 32, 53, 0.08);
  --palette-rule: rgba(15, 32, 53, 0.14);
  --palette-rule-strong: rgba(15, 32, 53, 0.22);

  /* ---------------------------------------------------------------
     Semantic aliases — components consume these, not raw palette.
  --------------------------------------------------------------- */
  --color-canvas: var(--palette-cream);
  --color-canvas-soft: var(--palette-cream-soft);
  --color-surface: #ffffff;

  --color-ink: var(--palette-ink-900);
  --color-ink-muted: var(--palette-ink-500);
  --color-ink-subtle: var(--palette-ink-300);

  --color-action: var(--palette-burgundy-600);
  --color-action-hover: var(--palette-burgundy-700);
  --color-action-soft: var(--palette-burgundy-50);

  --color-accent: var(--palette-gold-400);
  --color-accent-deep: var(--palette-gold-600);

  --color-rule-soft: var(--palette-rule-soft);
  --color-rule: var(--palette-rule);
  --color-rule-strong: var(--palette-rule-strong);

  /* ---------------------------------------------------------------
     Spacing scale — 4-point grid.
     Use for margins, padding, and layout gaps.
  --------------------------------------------------------------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */

  /* ---------------------------------------------------------------
     Type scale — three dramatic tiers.
     Display for section openers. Heading for section titles.
     Body for everything else, with editorial line-height.
  --------------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Playfair Display', Georgia, serif;
  --font-ui: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* Fluid display that tops out near 64px on wide screens. */
  --text-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --text-heading: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
  --text-subheading: 1.25rem;
  --text-body: 1.125rem;       /* 18px — editorial body */
  --text-small: 0.9375rem;     /* 15px */
  --text-caption: 0.8125rem;   /* 13px */
  --text-micro: 0.6875rem;     /* 11px — small-caps labels */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;        /* editorial rhythm */
  --leading-loose: 1.8;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;     /* small-caps labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------------------------------------------------------------
     Motion — whispered transitions, never bouncy.
     Consumers should prefer var(--duration-*) and var(--ease-*).
  --------------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 360ms;
  --duration-slower: 560ms;

  /* A soft out curve — approaches the final state gently, no overshoot. */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* A near-linear ease for opacity fades. */
  --ease-linear-soft: cubic-bezier(0.4, 0, 0.2, 1);
  /* Used sparingly — a subtle forward push for incoming content. */
  --ease-out-editorial: cubic-bezier(0.16, 0.84, 0.44, 1);

  /* ---------------------------------------------------------------
     Elevation — restraint. Shadows are rarely the right answer.
  --------------------------------------------------------------- */
  --shadow-hairline: 0 0 0 1px var(--color-rule);
  --shadow-soft: 0 1px 2px rgba(15, 32, 53, 0.04), 0 2px 8px rgba(15, 32, 53, 0.04);
  --shadow-lifted: 0 2px 4px rgba(15, 32, 53, 0.06), 0 8px 24px rgba(15, 32, 53, 0.06);

  /* ---------------------------------------------------------------
     Radii — default to near-sharp. Pills only where appropriate.
  --------------------------------------------------------------- */
  --radius-sharp: 2px;
  --radius-soft: 4px;
  --radius-card: 8px;
  --radius-pill: 999px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}

/* ---------------------------------------------------------------
   Utility classes — explicit opt-in.
   Nothing here restyles an existing element by default.
   Later PRs migrate templates to these utilities.
--------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.heading {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.subheading {
  font-family: var(--font-ui);
  font-size: var(--text-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.body-editorial {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.small-caps {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-muted);
}

.ink {
  color: var(--color-ink);
}

.ink-muted {
  color: var(--color-ink-muted);
}

.ink-subtle {
  color: var(--color-ink-subtle);
}

.canvas {
  background-color: var(--color-canvas);
}

.surface {
  background-color: var(--color-surface);
}

.hairline {
  border: 0;
  border-top: 1px solid var(--color-rule);
}

.hairline-strong {
  border: 0;
  border-top: 1px solid var(--color-rule-strong);
}

.hairline-y {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Numeric rhythm for stat strips and data tables. */
.numeric {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---------------------------------------------------------------
   Buttons — restraint first. Filled reserved for primary actions.
   .btn is the base; add .btn-primary / .btn-ghost / .btn-link.
--------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-soft);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-linear-soft),
    border-color var(--duration-fast) var(--ease-linear-soft),
    color var(--duration-fast) var(--ease-linear-soft);
}

.btn:hover {
  border-color: var(--color-ink);
  background-color: rgba(15, 32, 53, 0.03);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary {
  color: #fff;
  background-color: var(--color-action);
  border-color: var(--color-action);
}

.btn-primary:hover {
  background-color: var(--color-action-hover);
  border-color: var(--color-action-hover);
}

.btn-ghost {
  border-color: transparent;
  color: var(--color-ink-muted);
}

.btn-ghost:hover {
  background-color: rgba(15, 32, 53, 0.04);
  color: var(--color-ink);
  border-color: transparent;
}

.btn-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-action);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-linear-soft);
}

.btn-link:hover {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
}

/* ---------------------------------------------------------------
   Form fields — hairline underline aesthetic, not boxed.
--------------------------------------------------------------- */

.form-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.form-help {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-caption);
  color: var(--color-ink-subtle);
  margin-top: var(--space-2);
  line-height: var(--leading-snug);
}

.input-hairline {
  display: block;
  width: 100%;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule-strong);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-linear-soft);
}

.input-hairline::placeholder {
  color: var(--color-ink-subtle);
  font-style: italic;
}

.input-hairline:focus {
  outline: 0;
  border-bottom-color: var(--color-action);
  border-bottom-width: 2px;
  padding-bottom: calc(var(--space-3) - 1px);
}

.input-hairline:focus-visible {
  outline: 0;
}

/* Textarea variant — preserves the hairline treatment. */
textarea.input-hairline {
  resize: vertical;
  min-height: 6rem;
  padding: var(--space-3) var(--space-2);
}

/* ---------------------------------------------------------------
   Empty state — italic line + hairline rule + text CTA link.
   Opt-in via .empty-state on a container. Used by _empty_state.html
   but also reusable inline.
--------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--color-ink-muted);
}

.empty-state__message {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
  max-width: 32rem;
  margin: 0 auto;
}

.empty-state__rule {
  display: block;
  width: 3rem;
  height: 1px;
  background-color: var(--color-rule-strong);
  margin: var(--space-6) auto;
  border: 0;
}

.empty-state__cta {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-action);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--duration-fast) var(--ease-linear-soft);
}

.empty-state__cta:hover {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.empty-state__cta::after {
  content: ' →';
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out-soft);
}

.empty-state__cta:hover::after {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------
   Flash / toast — hairline top rule, subtle left bar, no heavy fill.
--------------------------------------------------------------- */

.flash {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  background-color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.flash::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-ink-subtle);
}

.flash--success::before { background-color: #2f8a5f; }
.flash--error::before { background-color: var(--color-action); }
.flash--warning::before { background-color: var(--color-accent); }
.flash--info::before { background-color: var(--palette-navy-600); }

/* Flash auto-dismiss — replaces the old animate-fade-out rule. */
@keyframes flash-dismiss {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; }
}

.flash--auto {
  animation: flash-dismiss 4s var(--ease-linear-soft) forwards;
}

/* ---------------------------------------------------------------
   Save button — Save ⇢ Saved with gold check.
--------------------------------------------------------------- */

.save-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-soft);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-linear-soft),
    border-color var(--duration-fast) var(--ease-linear-soft),
    color var(--duration-fast) var(--ease-linear-soft);
}

.save-btn:hover {
  border-color: var(--color-action);
  color: var(--color-action);
}

.save-btn--saved {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-accent);
}

.save-btn--saved:hover {
  color: var(--color-action);
  border-color: var(--color-action);
}

.save-btn__check {
  color: var(--color-accent);
  font-size: var(--text-small);
  line-height: 1;
}