/* Rack — design tokens (Tastefolio). Cloud servers, VPS and domains as real hardware: graphite faceplates with
   rack ears and screws, status LEDs that mean exactly one thing each, recessed VFD windows for prices, IPs and
   hostnames, one power-button orange for the action, and faders that configure a server like a mixing desk. */
:root, [data-theme="dark"] {
  --canvas: #121417;          /* the rack room */
  --surface: #1a1d21;         /* faceplate */
  --surface-2: #22262b;
  --surface-3: #2c3137;
  --surface-ink: #0c0e10;     /* deepest band: footer, console */
  --overlay: rgba(4, 6, 8, .66);
  --faceplate: linear-gradient(180deg, #24282d, #1a1d21);
  --brushed: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);

  --ink: #e7eaee;
  --ink-2: #a8b0ba;
  --ink-3: #828b97;
  --ink-inverse: #121417;

  --line: #2a2f35;
  --line-2: #3a4048;
  --screw: #4a515a;

  --brand: #ff6a1a;           /* power orange — the one action */
  --brand-ink: #1a0c04;
  --brand-soft: color-mix(in oklab, var(--brand) 16%, transparent);
  --brand-strong: color-mix(in oklab, var(--brand) 82%, #fff);
  --focus: color-mix(in oklab, var(--brand) 60%, transparent);

  --vfd: #6ff5d2;             /* vacuum-fluorescent display text */
  --vfd-dim: color-mix(in oklab, #6ff5d2 26%, transparent);
  --vfd-bg: #071210;
  --led-green: #3ddc84;       /* running, available, healthy */
  --led-amber: #ffb020;       /* provisioning, pending, warning */
  --led-red: #ff4d4f;         /* stopped, taken, failed */
  --led-blue: #4da3ff;        /* activity, network traffic */

  --success: #3ddc84;
  --success-soft: rgba(61, 220, 132, .14);
  --warning: #ffb020;
  --warning-soft: rgba(255, 176, 32, .14);
  --danger: #ff6b6d;
  --danger-soft: rgba(255, 77, 79, .14);
  --info: #4da3ff;
  --info-soft: rgba(77, 163, 255, .14);

  --chart-1: var(--vfd);
  --chart-2: #4da3ff;
  --chart-3: #ff6a1a;
  --chart-4: #b48cff;
  --chart-5: #ffb020;
  --chart-6: #5b636e;
  --chart-grid: #23282e;
  --chart-axis: var(--ink-3);
  --chart-curve: smooth;
  --chart-stroke: 2;
  --chart-area: .14;
  --chart-radius: 2;
  --chart-bar-gap: .35;
  --chart-donut: 12;
  --chart-gap: 2;
  --chart-dots: 0;

  --font-sans: "Onest", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Saira", "Vazirmatn", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, "Vazirmatn", monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15.5px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: 40px;
  --fs-display: clamp(40px, 5.8vw, 82px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-display: 700;
  --lh-tight: 1;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --tracking-display: -.01em;
  --tracking-caps: .16em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;
  --space-10: 144px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 16px 34px -18px rgba(0, 0, 0, .8);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 34px 80px -30px rgba(0, 0, 0, .9);
  --inset: inset 0 2px 6px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(0, 0, 0, .5);

  --u: 44px;                  /* one rack unit */
  --container: 1260px;
  --gutter: clamp(16px, 3vw, 32px);
  --control-h: 44px;
  --control-h-lg: 54px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 480ms;
  color-scheme: dark;
}

[data-theme="light"] {           /* cold aisle: brushed steel */
  --canvas: #e9ecef;
  --surface: #f7f8f9;
  --surface-2: #e1e5e9;
  --surface-3: #d4d9df;
  --surface-ink: #15181c;
  --overlay: rgba(20, 24, 28, .5);
  --faceplate: linear-gradient(180deg, #fbfcfc, #eef0f2);
  --brushed: repeating-linear-gradient(90deg, rgba(0, 0, 0, .018) 0 1px, transparent 1px 3px);
  --ink: #15181c;
  --ink-2: #4b535d;
  --ink-3: #5f6873;
  --ink-inverse: #f7f8f9;
  --line: #d2d7dd;
  --line-2: #b9c0c8;
  --screw: #a3abb4;
  --brand: #f25c0e;
  --brand-ink: #1a0c04;
  --brand-strong: color-mix(in oklab, var(--brand) 80%, #000);
  --success: #12804a;
  --success-soft: #dcf1e5;
  --warning: #9a5d00;
  --warning-soft: #f7ebd2;
  --danger: #c2282b;
  --danger-soft: #f8dfdf;
  --info: #1c64c4;
  --info-soft: #dde9f8;
  --chart-grid: #dde1e6;
  --chart-6: #a3abb4;
  --shadow-1: 0 1px 0 #fff inset, 0 1px 2px rgba(20, 24, 28, .12);
  --shadow-2: 0 1px 0 #fff inset, 0 16px 34px -18px rgba(20, 24, 28, .3);
  --shadow-3: 0 1px 0 #fff inset, 0 34px 80px -30px rgba(20, 24, 28, .4);
  --inset: inset 0 2px 6px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .4);
  color-scheme: light;
}

:root:lang(fa) {
  --font-sans: "Vazirmatn", "Onest", Tahoma, sans-serif;
  --font-display: "Vazirmatn", "Saira", sans-serif;
  --fs-display: clamp(34px, 4.8vw, 66px);
  --fw-display: 900;
  --lh-tight: 1.4;
  --lh-snug: 1.6;
  --lh-body: 1.95;
  --tracking-display: 0;
  --tracking-caps: 0;
}