/* RestoreFlow design tokens.
   Three layers: primitives (raw brand values) -> semantic tokens (what a color is FOR)
   -> component tokens in components.css. Components only ever use semantic tokens, so
   Light, Dark and System are a matter of redefining this file's second layer.
   Brand navy and sky are sampled from Force 1's public website (as in the free demo). */

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
  /* ---- primitives */
  --navy-950: #030f33; --navy-900: #061E60; --navy-800: #0D2C7E; --navy-700: #123b9e;
  --blue-600: #0B4FB3; --blue-500: #1663d6; --blue-400: #4b8df0; --blue-300: #8ab6f7;
  --sky-500: #1ABDFF; --sky-300: #7fd8ff;
  --gray-0: #ffffff; --gray-25: #f7f8fb; --gray-50: #f2f4f8; --gray-100: #e7ebf2; --gray-200: #d9dfea;
  --gray-300: #b9c3d6; --gray-400: #8d98ae; --gray-500: #5b6680; --gray-600: #36415a; --gray-700: #262f45;
  --gray-800: #192036; --gray-850: #141a2c; --gray-900: #0e1322; --gray-950: #090c17;

  /* ---- type, space, shape */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.9375rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --touch: 44px;            /* minimum touch target */
  --control-h: 40px;        /* desktop controls; touch layouts raise this to --touch */

  /* ---- motion (durations are production values, not the slowed demo playback) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* damped spring: overshoots slightly, then settles */
  --ease-spring: linear(0, 0.21 6%, 0.66 14%, 0.97 22%, 1.1 28%, 1.12 33%, 1.08 40%, 1.01 50%, 0.99 60%, 1);
  --dur-press: 110ms; --dur-fast: 160ms; --dur-base: 220ms; --dur-expand: 320ms; --dur-slow: 480ms;

  color-scheme: light;
}

/* ---- semantic tokens: light */
:root, :root[data-theme="light"] {
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-25);
  --surface-sunken: var(--gray-100);
  --surface-raised: var(--gray-0);
  --overlay: rgb(9 14 30 / 0.45);
  --text: #101a33;
  --text-2: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-inverse: #ffffff;
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --primary: var(--blue-600);
  --primary-hover: #0a449b;
  --primary-top: #2a6fd6;        /* button gradient, top */
  --primary-glow: rgb(11 79 179 / 0.35);
  --on-primary: #ffffff;
  --brand: var(--navy-900);
  --on-brand: #ffffff;
  --accent: var(--sky-500);
  --focus: #1593d6;
  --link: var(--blue-600);
  --selection: rgb(22 99 214 / 0.12);
  --skeleton: var(--gray-100);
  --skeleton-shine: rgb(255 255 255 / 0.7);

  --success: #0e6541; --success-bg: #e2f4eb; --success-border: #9ed4b7;
  --warning: #7a4a00; --warning-bg: #fff2d0; --warning-border: #e8c772;
  --danger: #b3261e;  --danger-bg: #fde8e6; --danger-border: #f0a8a2; --danger-top: #d03b32;
  --info: #0a4f8a;    --info-bg: #e0f0fd;   --info-border: #9ccaf2;

  /* job status: always shown with its word, never by color alone */
  --st-inquiry: #5b3aa8;     --st-inquiry-bg: #efe9fb;
  --st-scheduled: #0a4f8a;   --st-scheduled-bg: #e0f0fd;
  --st-in_progress: #8a4b00; --st-in_progress-bg: #fff0d6;
  --st-monitoring: #006b6b;  --st-monitoring-bg: #dcf4f2;
  --st-completed: #0e6541;   --st-completed-bg: #e2f4eb;
  --st-closed: #4a5468;      --st-closed-bg: #eceff4;
  --st-cancelled: #9a2d24;   --st-cancelled-bg: #fbe9e7;

  --shadow-1: 0 1px 2px rgb(16 26 51 / 0.06), 0 1px 1px rgb(16 26 51 / 0.04);
  --shadow-2: 0 4px 12px rgb(16 26 51 / 0.08), 0 1px 3px rgb(16 26 51 / 0.06);
  --shadow-3: 0 18px 48px rgb(16 26 51 / 0.18), 0 4px 12px rgb(16 26 51 / 0.08);
  /* layered button lighting (patterns 44-49), tuned for a light page */
  --btn-highlight: inset 0 1px 0 rgb(255 255 255 / 0.28);
  --btn-shade: inset 0 -2px 0 rgb(0 0 0 / 0.16);
  --btn-contact: 0 1px 2px rgb(6 30 96 / 0.35);
  --btn-pressed: inset 0 2px 4px rgb(0 0 0 / 0.26);
  --theme-color: #061E60;
  color-scheme: light;
}

/* ---- semantic tokens: dark */
:root[data-theme="dark"] {
  --bg: var(--gray-950);
  --surface: var(--gray-900);
  --surface-2: var(--gray-850);
  --surface-sunken: #070a12;
  --surface-raised: var(--gray-800);
  --overlay: rgb(0 0 0 / 0.6);
  --text: #e9edf6;
  --text-2: #c2c9d8;
  --text-muted: #98a2b8;
  --text-inverse: #0e1322;
  --border: #262f45;
  --border-strong: #3a4560;
  --primary: var(--blue-400);
  --primary-hover: #6aa2f4;
  --primary-top: #6aa2f4;
  --primary-glow: rgb(75 141 240 / 0.28);
  --on-primary: #06132e;
  --brand: #0b1a45;
  --on-brand: #ffffff;
  --accent: var(--sky-300);
  --focus: #5fc6ff;
  --link: var(--blue-300);
  --selection: rgb(75 141 240 / 0.18);
  --skeleton: #1b2236;
  --skeleton-shine: rgb(255 255 255 / 0.06);

  --success: #6fd3a2; --success-bg: #0f2b20; --success-border: #1f5a40;
  --warning: #f5c56b; --warning-bg: #2e2208; --warning-border: #6a4d12;
  --danger: #ff8f86;  --danger-bg: #351513; --danger-border: #7a2b25; --danger-top: #ff9f97;
  --info: #8cc6ff;    --info-bg: #0f2236;   --info-border: #22476e;

  --st-inquiry: #c4b0ff;     --st-inquiry-bg: #251c3d;
  --st-scheduled: #8cc6ff;   --st-scheduled-bg: #0f2236;
  --st-in_progress: #f5c56b; --st-in_progress-bg: #2e2208;
  --st-monitoring: #6fe0d6;  --st-monitoring-bg: #0b2a29;
  --st-completed: #6fd3a2;   --st-completed-bg: #0f2b20;
  --st-closed: #b3bccd;      --st-closed-bg: #1f2638;
  --st-cancelled: #ff9f97;   --st-cancelled-bg: #351513;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 6px 16px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.5);
  --shadow-3: 0 20px 56px rgb(0 0 0 / 0.6), 0 4px 12px rgb(0 0 0 / 0.5);
  /* on a dark page the contact shadow disappears; a lighter rim and less glow read better */
  --btn-highlight: inset 0 1px 0 rgb(255 255 255 / 0.35);
  --btn-shade: inset 0 -2px 0 rgb(0 0 0 / 0.22);
  --btn-contact: 0 1px 2px rgb(0 0 0 / 0.6);
  --btn-pressed: inset 0 2px 4px rgb(0 0 0 / 0.38);
  --theme-color: #090c17;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0.01ms; --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-expand: 0.01ms; --dur-slow: 0.01ms;
  }
}