/* Hallmark · genre: modern-minimal · design-system: design.md · designed-as-app
 * Warm Horizon · Kuchup logo palette (navy + orange) · light theme
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · tokens: pass (48)
 */

:root {
  color-scheme: light;

  /* Warm, optimistic base with open-sky supporting surfaces */
  --color-paper: #fcfaf7;
  --color-paper-2: #f2f7fa;
  --color-paper-3: #e4f0f6;
  --color-ink: #0e3a69;
  --color-ink-2: #345c7c;
  --color-muted: #5d7488;
  --color-rule: #a9c1d1;
  --color-accent: #ff6b35;
  --color-accent-hover: #ff7f52;
  --color-accent-deep: #d94f1f;
  --color-accent-soft: rgba(255, 107, 53, 0.14);
  --color-accent-2: #0e3a69;
  --color-accent-ink: #082743;
  --color-focus: #ff6b35;

  /* Status primitives — chip-scale meaning, not a second brand accent */
  --color-status-sky: oklch(48% 0.12 240);
  --color-status-green: oklch(44% 0.13 150);
  --color-status-violet: oklch(46% 0.11 295);
  --color-status-crimson: oklch(48% 0.16 20);
  --color-status-ochre: oklch(55% 0.13 80);
  --color-status-slate: oklch(46% 0.03 250);
  --color-status-teal: oklch(45% 0.08 195);

  /* Base (panel / marketing shared names) */
  --bg-base: var(--color-paper);
  --bg-surface: var(--color-paper);
  --bg-surface-hover: var(--color-paper-2);

  /* Thin, calm boundaries; navy is reserved for emphasis */
  --border-subtle: #d1e0e9;
  --border-hover: #7fa2bb;

  /* Orange leads brand chrome; status hues carry workbench meaning */
  --accent-primary: var(--color-accent);
  --accent-primary-hover: var(--color-accent-hover);
  --accent-blue: var(--color-status-sky);
  --accent-purple: var(--color-status-violet);
  --accent-green: var(--color-status-green);

  --accent-primary-soft: var(--color-accent-soft);
  --accent-blue-soft: color-mix(in srgb, var(--color-status-sky) 14%, var(--color-paper));
  --accent-purple-soft: color-mix(in srgb, var(--color-status-violet) 14%, var(--color-paper));
  --accent-green-soft: color-mix(in srgb, var(--color-status-green) 14%, var(--color-paper));

  /* Text */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-2);
  --text-muted: var(--color-muted);
  --text-on-accent: var(--color-accent-ink);

  /* Atmosphere — no multi-hue glow carnival */
  --glow-blue: radial-gradient(circle, transparent 0%, transparent 70%);
  --glow-purple: radial-gradient(circle, transparent 0%, transparent 70%);
  --glow-orange: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 35%, transparent) 0%, transparent 70%);

  /* Gentle elevation — welcoming, not poster-heavy */
  --shadow-card: 0 8px 24px rgba(14, 58, 105, 0.1);
  --shadow-sm: 0 2px 8px rgba(14, 58, 105, 0.12);
  --shadow-button: 0 3px 0 var(--color-accent-deep), 0 8px 16px -8px rgba(255, 107, 53, 0.45);
  --shadow-button-hover: 0 4px 0 var(--color-accent-deep), 0 12px 22px -10px rgba(255, 107, 53, 0.5);
  --shadow-button-pressed: 0 1px 0 var(--color-accent-deep), 0 3px 8px -5px rgba(255, 107, 53, 0.4);
  --radius-card: 1rem;
  --radius-button: 999px;
  --radius-pill: 999px;
  --radius-input: 0.75rem;
  --control-height: 2.75rem;
  --control-pad-x: 0.85rem;
  --control-font: 0.8125rem;
  --control-line: 1;
  --ease-snap: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 180ms;

  /* 4-point named spacing scale (design.md) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Typography stacks (faces loaded by page) */
  --font-display: "Lexend", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-inter: var(--font-body);

  /* Panel aliases — keep existing class names working */
  --bg: var(--bg-base);
  --bg-elevated: var(--bg-surface);
  --surface: var(--bg-surface);
  --surface2: var(--bg-surface-hover);
  --surface-hover: var(--bg-surface-hover);
  --border: var(--border-subtle);
  --border-strong: var(--color-rule);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --accent: var(--accent-primary);
  --accent-hover: var(--accent-primary-hover);
  --accent-soft: var(--accent-primary-soft);
  --intent: var(--color-status-sky);
  --intent-soft: color-mix(in srgb, var(--color-status-sky) 14%, var(--color-paper));
  --success: var(--color-status-green);
  --success-soft: color-mix(in srgb, var(--color-status-green) 14%, var(--color-paper));
  --pending: var(--color-status-violet);
  --pending-soft: color-mix(in srgb, var(--color-status-violet) 14%, var(--color-paper));
  --danger: var(--color-status-crimson);
  --danger-soft: color-mix(in srgb, var(--color-status-crimson) 14%, var(--color-paper));
  --dismiss: var(--color-status-ochre);
  --dismiss-soft: color-mix(in srgb, var(--color-status-ochre) 14%, var(--color-paper));
  --memory: var(--color-status-slate);
  --memory-soft: color-mix(in srgb, var(--color-status-slate) 14%, var(--color-paper));
  --warn: var(--dismiss);
  --warn-soft: var(--dismiss-soft);
  --referral: var(--pending);
  --referral-soft: var(--pending-soft);
  --visa: var(--color-status-teal);
  --visa-soft: color-mix(in srgb, var(--color-status-teal) 14%, var(--color-paper));
  --brand-sky: var(--color-status-sky);
  --brand-sky-soft: var(--intent-soft);
  --brand-gradient: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-primary-hover) 100%
  );
  --brand-gradient-soft: linear-gradient(
    135deg,
    var(--accent-primary-soft) 0%,
    color-mix(in srgb, var(--color-accent) 8%, var(--color-paper)) 100%
  );
  --radius: var(--radius-card);
  --radius-sm: 0.625rem;
  --shadow: var(--shadow-card);

  /* Structure helpers */
  --rule-width: 1px;
  --shadow-offset: 0px;
  --shadow-offset-sm: 0px;
}