/* AirLab design tokens.
   Tactile dark theme is the default; [data-theme="light"] swaps every colour token.
   Components use tokens only — never raw colours. */

:root {
  color-scheme: dark;

  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Display", Roboto, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", "SF Mono", ui-monospace, Consolas, monospace;

  --fs-10: 10.5px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-34: 34px; --fs-42: 42px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 15px; --r-xl: 20px; --r-pill: 999px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 110ms; --dur-2: 190ms; --dur-3: 320ms;

  --rail-w: 76px; --rail-w-open: 240px; --topbar-h: 58px;
  --control-h: 34px; --control-h-sm: 28px; --control-h-lg: 42px;

  /* ── Surfaces ───────────────────────────────────────────── */
  --bg-0: #0f1012;
  --bg-1: #141518;
  --bg-2: #18191d;
  --surface: #1c1d22;
  --surface-hi: #24262c;
  --surface-lo: #17181c;
  --sunken: #0d0e10;
  --surface-grad: linear-gradient(180deg, #212329 0%, #1a1b20 100%);
  --raised-grad: linear-gradient(180deg, #2b2d34 0%, #212329 100%);
  --raised-grad-hover: linear-gradient(180deg, #31343b 0%, #26282e 100%);
  --rail-grad: linear-gradient(180deg, #17181c 0%, #121316 100%);

  --line: rgba(255, 255, 255, .062);
  --line-2: rgba(255, 255, 255, .1);
  --line-3: rgba(255, 255, 255, .16);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .055);

  /* ── Text ───────────────────────────────────────────────── */
  --text-1: #ede8e0;
  --text-2: #b6afa5;
  --text-3: #a39d93;
  --text-4: #9b958c;
  --text-on-accent: #1d1206;

  /* ── Accent (amber) and semantic colours ────────────────── */
  --accent: #f08a3c;
  --accent-hi: #ffb06a;
  --accent-lo: #c7631d;
  --accent-soft: rgba(240, 138, 60, .13);
  --accent-softer: rgba(240, 138, 60, .07);
  --accent-line: rgba(240, 138, 60, .42);
  --accent-grad: linear-gradient(180deg, #ffa357 0%, #ea7d2b 55%, #d96c1e 100%);
  --accent-glow: 0 0 0 1px rgba(255, 166, 92, .28), 0 4px 18px -2px rgba(240, 138, 60, .5);

  --gold: #e3b366;
  --cool: #7db7ea;
  --teal: #5cc4b4;
  --violet: #b59cec;
  --rose: #ea8d9c;
  --sand: #cdb79a;

  --ok: #5fbe89;   --ok-soft: rgba(95, 190, 137, .13);
  --warn: #e9b14c; --warn-soft: rgba(233, 177, 76, .14);
  --bad: #f0827a;  --bad-soft: rgba(234, 107, 97, .14);
  --info: #7db7ea; --info-soft: rgba(125, 183, 234, .13);

  /* ── Elevation (tactile) ────────────────────────────────── */
  --shadow-1: var(--bevel), 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: var(--bevel), 0 1px 2px rgba(0, 0, 0, .38), 0 10px 26px -10px rgba(0, 0, 0, .6);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 56px -12px rgba(0, 0, 0, .75), 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-pressed: inset 0 2px 5px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .35);
  --well: inset 0 1px 3px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .035);
  --focus-ring: 0 0 0 2px rgba(240, 138, 60, .6), 0 0 16px rgba(240, 138, 60, .28);
  --scrim: rgba(4, 5, 7, .64);

  /* ── Charts ─────────────────────────────────────────────── */
  --chart-bg: #0f1013;
  --chart-plot: #121316;
  --chart-grid: rgba(255, 255, 255, .042);
  --chart-grid-2: rgba(255, 255, 255, .085);
  --chart-axis: #8e877d;
  --chart-label: #a9a297;
  --chart-sat: #f08a3c;
  --chart-sat-glow: rgba(240, 138, 60, .55);
  --chart-rh: rgba(227, 179, 102, .26);
  --chart-rh-label: rgba(227, 179, 102, .75);
  --chart-wb: rgba(125, 183, 234, .2);
  --chart-h: rgba(255, 255, 255, .1);
  --chart-v: rgba(181, 156, 236, .17);
  --chart-fog: rgba(125, 183, 234, .03);
  --chart-envelope: rgba(95, 190, 137, .1);
  --chart-envelope-line: rgba(95, 190, 137, .55);

  --series-1: #f08a3c; --series-2: #7db7ea; --series-3: #5cc4b4; --series-4: #e3b366;
  --series-5: #b59cec; --series-6: #ea8d9c; --series-7: #a7b0bb; --series-8: #8fd18b;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-0: #e6e2dc;
  --bg-1: #ece8e2;
  --bg-2: #f0ece6;
  --surface: #f6f3ee;
  --surface-hi: #fdfcfa;
  --surface-lo: #efebe5;
  --sunken: #e2ddd5;
  --surface-grad: linear-gradient(180deg, #fbf9f6 0%, #f3f0ea 100%);
  --raised-grad: linear-gradient(180deg, #ffffff 0%, #f1ede7 100%);
  --raised-grad-hover: linear-gradient(180deg, #ffffff 0%, #f6f2ec 100%);
  --rail-grad: linear-gradient(180deg, #efebe5 0%, #e8e4dd 100%);

  --line: rgba(60, 45, 30, .09);
  --line-2: rgba(60, 45, 30, .14);
  --line-3: rgba(60, 45, 30, .22);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .9);

  --text-1: #221f1b;
  --text-2: #4d4842;
  --text-3: #58524a;
  --text-4: #5f5951;
  --text-on-accent: #221f1b;

  --accent: #dc7323;
  --accent-hi: #86400a;
  --accent-lo: #b85a14;
  --accent-soft: rgba(220, 115, 35, .12);
  --accent-softer: rgba(220, 115, 35, .06);
  --accent-line: rgba(220, 115, 35, .45);
  --accent-grad: linear-gradient(180deg, #f39448 0%, #e07a28 55%, #d6721f 100%);
  --accent-glow: 0 0 0 1px rgba(207, 106, 27, .25), 0 4px 14px -2px rgba(220, 115, 35, .42);

  --gold: #785826;
  --cool: #295c8a;
  --teal: #19675b;
  --violet: #6747b6;
  --rose: #a53b55;
  --sand: #705e45;

  --ok: #1f653e;   --ok-soft: rgba(47, 154, 95, .12);
  --warn: #74530c; --warn-soft: rgba(176, 126, 18, .13);
  --bad: #9b342c;  --bad-soft: rgba(200, 70, 60, .11);
  --info: #295c8a; --info-soft: rgba(60, 132, 196, .11);

  --shadow-1: var(--bevel), 0 1px 2px rgba(70, 50, 30, .1);
  --shadow-2: var(--bevel), 0 1px 2px rgba(70, 50, 30, .08), 0 10px 24px -12px rgba(70, 50, 30, .22);
  --shadow-3: inset 0 1px 0 #fff, 0 24px 56px -14px rgba(70, 50, 30, .32), 0 4px 14px rgba(70, 50, 30, .1);
  --shadow-pressed: inset 0 2px 4px rgba(70, 50, 30, .16), inset 0 0 0 1px rgba(70, 50, 30, .08);
  --well: inset 0 1px 3px rgba(70, 50, 30, .14), inset 0 0 0 1px rgba(70, 50, 30, .06);
  --focus-ring: 0 0 0 2px rgba(220, 115, 35, .55), 0 0 12px rgba(220, 115, 35, .2);
  --scrim: rgba(40, 32, 24, .38);

  --chart-bg: #fbfaf8;
  --chart-plot: #fdfcfb;
  --chart-grid: rgba(60, 45, 30, .055);
  --chart-grid-2: rgba(60, 45, 30, .11);
  --chart-axis: #6f685f;
  --chart-label: #57514a;
  --chart-sat: #d96c1e;
  --chart-sat-glow: rgba(217, 108, 30, .25);
  --chart-rh: rgba(185, 137, 58, .32);
  --chart-rh-label: rgba(150, 105, 30, .9);
  --chart-wb: rgba(60, 132, 196, .24);
  --chart-h: rgba(60, 45, 30, .12);
  --chart-v: rgba(125, 98, 194, .2);
  --chart-fog: rgba(60, 132, 196, .035);
  --chart-envelope: rgba(47, 154, 95, .09);
  --chart-envelope-line: rgba(47, 154, 95, .6);

  --series-1: #dc7323; --series-2: #3c84c4; --series-3: #23917f; --series-4: #b9893a;
  --series-5: #7d62c2; --series-6: #c25570; --series-7: #6b7682; --series-8: #4f9d4b;
}