/* XPanel V14 — design tokens. Shared by every page; components live in xpanel.css.
   Direction: soft neutral canvas, white rounded surfaces, floating graphite sidebar,
   pill controls, one warm accent used sparingly. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Typography */
  --xp-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --xp-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --xp-text-xs: 11.5px;
  --xp-text-sm: 12.5px;
  --xp-text-md: 13.5px;      /* UI body */
  --xp-text-lg: 15px;
  --xp-text-xl: 17px;
  --xp-text-2xl: 21px;
  --xp-text-3xl: 26px;       /* figures */
  --xp-text-display: clamp(24px, 1.1rem + 0.9vw, 32px); /* page titles */
  --xp-leading: 1.5;
  --xp-leading-tight: 1.15;

  /* Spacing (4px grid) */
  --xp-1: 4px; --xp-2: 8px; --xp-3: 12px; --xp-4: 16px; --xp-5: 20px;
  --xp-6: 24px; --xp-8: 32px; --xp-10: 40px; --xp-12: 48px;

  /* Shape: soft and generous; controls are pills */
  --xp-r-xs: 6px; --xp-r-sm: 10px; --xp-r-md: 12px; --xp-r-lg: 18px; --xp-r-xl: 22px; --xp-r-full: 999px;

  /* Motion: short, settling, never bouncing */
  --xp-ease: cubic-bezier(.2, .7, .2, 1);
  --xp-fast: 120ms;
  --xp-base: 180ms;
  --xp-slow: 260ms;

  /* Layers */
  --xp-z-topbar: 40; --xp-z-sidebar: 60; --xp-z-overlay: 55; --xp-z-menu: 70;
  --xp-z-modal: 1000; --xp-z-toast: 1100; --xp-z-loading: 1200;

  /* Layout */
  --xp-side-w: 236px;
  --xp-side-gap: 10px;
  --xp-topbar-h: 58px;
  --xp-content-max: 1520px;
  --xp-control-h: 36px;

  /* Graphite sidebar: identical in both themes, it is the brand surface */
  --xp-side-bg: linear-gradient(180deg, #2b2b2f 0%, #161618 100%);
  --xp-side-text: #f4f4f5;
  --xp-side-text-2: #b4b4bc;
  --xp-side-text-3: #85858f;
  --xp-side-line: rgba(255, 255, 255, .08);
  --xp-side-chip: rgba(255, 255, 255, .08);
  --xp-side-hover: rgba(255, 255, 255, .06);
  --xp-side-active: rgba(255, 255, 255, .12);
}

/* Light: the default look. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --xp-bg: #ececee;
  --xp-surface: #ffffff;
  --xp-surface-2: #f4f4f5;
  --xp-surface-3: #e8e8eb;
  --xp-border: #e4e4e7;
  --xp-border-strong: #d1d1d6;
  --xp-text: #111113;
  --xp-text-2: #3f3f46;
  --xp-text-3: #63636b;
  --xp-text-4: #8b8b94;

  --xp-primary: #111113;
  --xp-primary-hover: #2c2c30;
  --xp-on-primary: #ffffff;

  /* Ember: fills, icons, focus. --xp-accent-ink is the text-safe step. */
  --xp-accent: #e4572e;
  --xp-accent-ink: #b5401c;
  --xp-accent-solid: #e4572e;
  --xp-accent-soft: #fdece6;
  --xp-accent-line: #f6c3b1;

  --xp-success: #157a46;   --xp-success-soft: #e6f4ec;  --xp-success-line: #b8dfc8;
  --xp-warning: #94600b;   --xp-warning-soft: #fcf2df;  --xp-warning-line: #f0d39c;
  --xp-danger: #c62f3a;    --xp-danger-soft: #fdeceb;   --xp-danger-line: #f4c2c4;
  --xp-info: #2459c9;      --xp-info-soft: #eaf0fc;     --xp-info-line: #c2d3f5;

  --xp-card-border: transparent;
  --xp-card-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 10px 30px -14px rgba(17, 17, 19, .14);
  --xp-overlay: rgba(17, 17, 19, .4);
  --xp-shadow-pop: 0 24px 60px -18px rgba(17, 17, 19, .32), 0 2px 8px rgba(17, 17, 19, .06);
  --xp-shadow-menu: 0 16px 40px -12px rgba(17, 17, 19, .24), 0 1px 3px rgba(17, 17, 19, .06);
  --xp-scrollbar: rgba(17, 17, 19, .16);
  --xp-scrollbar-hover: rgba(17, 17, 19, .3);
  --xp-selection: rgba(228, 87, 46, .2);
  --xp-input-bg: #f4f4f5;
  --xp-input-line: transparent;
  --xp-input-hover: #ececef;

  /* Chart palette (validated categorical order; light steps) */
  --xp-chart-1: #2a78d6; --xp-chart-2: #eb6834; --xp-chart-3: #1baf7a; --xp-chart-4: #eda100;
  --xp-chart-5: #e87ba4; --xp-chart-6: #008300; --xp-chart-7: #6250d6; --xp-chart-8: #e34948;
  --xp-chart-grid: #e4e4e7;
}

/* Dark: its own steps, not an inverted light. [data-theme="oled"] keeps old saved values working. */
:root[data-theme="dark"],
:root[data-theme="oled"] {
  color-scheme: dark;
  --xp-bg: #0c0c0d;
  --xp-surface: #161618;
  --xp-surface-2: #1d1d20;
  --xp-surface-3: #27272b;
  --xp-border: #26262a;
  --xp-border-strong: #3a3a40;
  --xp-text: #f4f4f5;
  --xp-text-2: #c8c8cf;
  --xp-text-3: #9b9ba4;
  --xp-text-4: #707079;

  --xp-primary: #f4f4f5;
  --xp-primary-hover: #ffffff;
  --xp-on-primary: #0c0c0d;

  --xp-accent: #f06a3e;
  --xp-accent-ink: #ff9572;
  --xp-accent-solid: #e4572e;
  --xp-accent-soft: rgba(240, 106, 62, .14);
  --xp-accent-line: rgba(240, 106, 62, .38);

  --xp-success: #4cc38a;   --xp-success-soft: rgba(76, 195, 138, .12);  --xp-success-line: rgba(76, 195, 138, .32);
  --xp-warning: #e5a83b;   --xp-warning-soft: rgba(229, 168, 59, .12);  --xp-warning-line: rgba(229, 168, 59, .32);
  --xp-danger: #f07178;    --xp-danger-soft: rgba(240, 113, 120, .12);  --xp-danger-line: rgba(240, 113, 120, .34);
  --xp-info: #7aa7ff;      --xp-info-soft: rgba(122, 167, 255, .12);    --xp-info-line: rgba(122, 167, 255, .32);

  --xp-card-border: #222226;
  --xp-card-shadow: none;
  --xp-overlay: rgba(0, 0, 0, .64);
  --xp-shadow-pop: 0 24px 60px -12px rgba(0, 0, 0, .7);
  --xp-shadow-menu: 0 16px 40px -10px rgba(0, 0, 0, .66);
  --xp-scrollbar: rgba(255, 255, 255, .14);
  --xp-scrollbar-hover: rgba(255, 255, 255, .26);
  --xp-selection: rgba(240, 106, 62, .3);
  --xp-input-bg: #1d1d20;
  --xp-input-line: transparent;
  --xp-input-hover: #232327;

  --xp-side-bg: linear-gradient(180deg, #1e1e21 0%, #121214 100%);

  /* Chart palette (validated categorical order; dark steps) */
  --xp-chart-1: #3987e5; --xp-chart-2: #d95926; --xp-chart-3: #199e70; --xp-chart-4: #c98500;
  --xp-chart-5: #d55181; --xp-chart-6: #008300; --xp-chart-7: #9085e9; --xp-chart-8: #e66767;
  --xp-chart-grid: #26262a;
}

:root[data-theme="oled"] {
  --xp-bg: #000000;
  --xp-surface: #0e0e10;
  --xp-surface-2: #161618;
}

/* Legacy variable names used by inline styles in app.js / page markup.
   They resolve to V14 tokens so old markup follows the active theme. */
:root,
:root[data-theme] {
  --font-body: var(--xp-font); --font-head: var(--xp-font); --font-mono: var(--xp-mono);
  --bg: var(--xp-bg); --bg-main: var(--xp-bg); --bg2: var(--xp-surface); --bg3: var(--xp-surface-2); --bg4: var(--xp-surface-3);
  --surface: var(--xp-surface); --surface2: var(--xp-surface-2); --surface3: var(--xp-surface-3); --card: var(--xp-surface);
  --glass: var(--xp-surface); --glass-bdr: var(--xp-border); --glass-blur: none; --code-bg: var(--xp-surface-2);
  --txt: var(--xp-text); --txt2: var(--xp-text-2); --txt3: var(--xp-text-3); --txt4: var(--xp-text-4);
  --text: var(--xp-text); --text-secondary: var(--xp-text-2);
  --bdr: var(--xp-border); --bdr2: var(--xp-border); --brd: var(--xp-border); --border: var(--xp-border);
  --accent: var(--xp-accent); --accent-hover: var(--xp-accent); --accent-soft: var(--xp-accent-soft); --accent-deep: var(--xp-accent-solid);
  --accent-fg: var(--xp-on-primary); --accent-light: var(--xp-accent); --pri: var(--xp-accent);
  --accent-a05: var(--xp-accent-soft); --accent-a08: var(--xp-accent-soft); --accent-a10: var(--xp-accent-soft);
  --accent-a15: var(--xp-accent-soft); --accent-a20: var(--xp-accent-line); --accent-a30: var(--xp-accent-line);
  --accent-grad: linear-gradient(var(--xp-primary), var(--xp-primary)); --accent-grad-soft: var(--xp-accent-soft);
  --accent-glow: 0 0 0 3px var(--xp-accent-soft);
  --grn: var(--xp-success); --red: var(--xp-danger); --yel: var(--xp-warning); --ora: var(--xp-warning); --org: var(--xp-warning);
  --orange: var(--xp-warning); --yellow: var(--xp-warning); --success: var(--xp-success);
  --cyn: var(--xp-chart-3); --pur: var(--xp-chart-7); --pink: var(--xp-chart-5); --pnk: var(--xp-chart-5);
  --grn-bg: var(--xp-success-soft); --red-bg: var(--xp-danger-soft); --ora-bg: var(--xp-warning-soft); --cyn-bg: var(--xp-info-soft); --pur-bg: var(--xp-info-soft);
  --grn-bdr: var(--xp-success-line); --red-bdr: var(--xp-danger-line); --ora-bdr: var(--xp-warning-line); --cyn-bdr: var(--xp-info-line); --pur-bdr: var(--xp-info-line);
  --rad: var(--xp-r-md); --rad-sm: var(--xp-r-sm); --rad-lg: var(--xp-r-lg); --rad-xl: var(--xp-r-xl); --radius: var(--xp-r-lg); --radius-sm: var(--xp-r-md);
  --shadow-xs: none; --shadow-sm: none; --shadow-md: var(--xp-shadow-menu); --shadow-lg: var(--xp-shadow-pop); --shadow-xl: var(--xp-shadow-pop); --shadow: var(--xp-shadow-pop);
  --ease: var(--xp-ease); --ease-spring: var(--xp-ease);
  --side-w: var(--xp-side-w); --body-gradient: none;
  --scrollbar-thumb: var(--xp-scrollbar); --scrollbar-thumb-hover: var(--xp-scrollbar-hover); --scrollbar-track: transparent;
}