/*
  Quantum Design Tokens (transitional)

  This file will become the source of truth for
  brand-level design tokens.

  NOTE:
  - Not yet integrated into main.css
  - No production impact in this state
*/

/* Define Quantum tokens */
:root {

  /* ───────────────────────────────
     🎨  Core Color Tokens (Quantum Palette)
     ─────────────────────────────── */
  --jet-stream: #c0d4d5;
  --blue-lagoon: #048a8b;
  --thunder: #251e24;
  --patina: #609293;
  --mosque: #047477;
  --half-baked: #74c5c6;
  --tundora: #4d4c4c;
  --fountain-blue: #67bcc4;
  --keppel: #33adae;
  --pine-green: #047c74;

  /* Legacy aliases (for backward compatibility) */
  --color-quantum-blue: var(--mosque);
  --color-quantum-gray: var(--tundora);

  /* ───────────────────────────────
     🔤  Typography / Font Base
     ─────────────────────────────── */
/*  --font-sans: Inter, "Helvetica Neue", Arial, sans-serif; /* legacy developmnent font */
  --font-sans: "Lato", Arial, sans-serif;
  --font-display: "Open Sans", "lato", sans-serif;

  /* ───────────────────────────────
     🩶  Base Surfaces & Borders
     ─────────────────────────────── */
  --surface-default: #ffffff;
  --surface-muted: #f9fafb;
  --surface-inverse: var(--color-quantum-blue);
  --border-default: #e5e7eb;

  /* ───────────────────────────────
     🌗  Derived Surfaces
     ─────────────────────────────── */
  --surface-header: var(--surface-muted);
  --surface-header-translucent: color-mix(in oklab, var(--surface-header) 90%, transparent);

  --surface-footer: var(--surface-muted);
  --surface-bottomnav: var(--surface-footer);
  --surface-card: var(--surface-default);

  --surface-hero-bg: var(--color-quantum-blue);
  --surface-hero-overlay: rgba(0,0,0,0.4);
  --surface-hero-overlay-0: rgba(0,0,0,0);

  --border-section: var(--border-default);

  /* ───────────────────────────────
     🩸  Text Tokens
     ─────────────────────────────── */
  --text-primary: var(--color-quantum-blue);
  --text-heading: var(--color-quantum-blue);
  --text-secondary: color-mix(in oklab, var(--text-primary) 80%, white);
  --text-strong: color-mix(in oklab, var(--text-primary) 90%, black);
  --text-muted: color-mix(in oklab, var(--text-primary) 65%, white);
  --text-subtle: color-mix(in oklab, var(--text-primary) 55%, white);
  --text-verysubtle: color-mix(in oklab, var(--text-primary) 40%, white);

  --text-inverse: #ffffff;
  --text-inverse-muted: color-mix(in oklab, var(--text-inverse) 90%, transparent);
  --text-accent: var(--fountain-blue);

  /* Neutral scale (align Tailwind gray classes to Quantum tokens) */
  --color-gray-50: var(--surface-muted);
  --color-gray-100: color-mix(in oklab, var(--surface-muted) 90%, white);
  --color-gray-200: var(--border-default);
  --color-gray-300: color-mix(in oklab, var(--border-default) 80%, var(--text-primary));
  --color-gray-400: var(--text-muted);
  --color-gray-500: var(--text-secondary);
  --color-gray-600: var(--text-primary);
  --color-gray-700: var(--text-strong);
  --color-gray-800: color-mix(in oklab, var(--text-primary) 85%, black);
  --color-gray-900: color-mix(in oklab, var(--text-primary) 95%, black);

  /* Footer & Bottom-nav */
  --text-footer-heading: var(--text-heading);
  --text-footer-body: var(--text-secondary);
  --text-bottomnav-heading: var(--text-heading);
  --text-bottomnav-body: var(--text-secondary);
  --border-bottomnav: var(--border-section);

  /* ───────────────────────────────
     🔗  Link Tokens
     ─────────────────────────────── */
  --link-default: var(--color-quantum-blue);
  --link-hover: color-mix(in oklab, var(--color-quantum-blue) 80%, white);
  --link-visited: color-mix(in oklab, var(--color-quantum-blue) 60%, var(--fountain-blue));

  --text-link: var(--link-default);
  --text-link-hover: var(--link-hover);
  --text-link-visited: var(--link-visited);

  /* ───────────────────────────────
     🧱  Layout + Spacing
     ─────────────────────────────── */
  --hero-height: clamp(320px, 55vh, 520px);

  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Hero paddings */
  --hero-padding-x-sm: var(--space-md);
  --hero-padding-x-md: var(--space-lg);
  --hero-padding-x-lg: var(--space-xl);

  --hero-padding-left-default-sm: 4rem;
  --hero-padding-left-default-md: 6rem;
  --hero-padding-left-default-lg: 8rem;

  /* Informational surfaces */
  --surface-info-weak: #e8f4f3;
  --surface-info-strong: #d5efee;
  --border-info: #cbe7e4;
  --text-info: var(--color-quantum-blue);
  --text-info-muted: color-mix(in oklab, var(--text-info) 80%, transparent);
  --text-inverse-muted: color-mix(in oklab, var(--text-inverse) 90%, transparent);

  /* Status colors */
  --status-success: var(--pine-green);
  --status-error: #dc2626;

  /* Radii */
  --radius-card: 1rem;
  --radius-dialog: 1rem;

  /* Shadows */
  --shadow-control: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 6px 14px rgba(0, 0, 0, 0.12);
  --shadow-dialog: 0 14px 30px rgba(0, 0, 0, 0.18);
  --shadow-speech-tail: 0 6px 8px rgba(0, 0, 0, 0.06);

  /* Overlays */
  --overlay-scrim: color-mix(in oklab, black 60%, transparent);

  /* ───────────────────────────────
     🧩  Buttons
     ─────────────────────────────── */
  --button-primary-bg: var(--color-quantum-blue);
  --button-primary-text: var(--text-inverse);
  --button-primary-hover-bg: color-mix(in oklab, var(--color-quantum-blue) 85%, black);

  --button-secondary-bg: var(--border-default);
  --button-secondary-text: var(--text-primary);
  --button-secondary-hover-bg: color-mix(in oklab, var(--border-default) 85%, black);

  --button-inverse-bg: transparent;
  --button-inverse-text: var(--text-inverse);
  --button-inverse-border: var(--text-inverse);

  /* ───────────────────────────────
     🧭  Navigation
     ─────────────────────────────── */
  --nav-text: var(--color-quantum-blue);
  --nav-text-hover: var(--link-hover);
  --nav-bg-hover: var(--surface-header);
  --nav-padding-x: var(--space-sm);
  --nav-padding-y: var(--space-xs);

  /* ───────────────────────────────
     ⏱️  Transitions
     ─────────────────────────────── */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
}