/* ============================================================================
   JSOOR — Tech & Repair  ·  Design Foundation
   The tech/repair-store vertical of the JSOOR platform.
   Parent: JSOOR (charcoal / white / emerald). Type: Sora + JetBrains Mono.

   THEMES (class-swap on the surface root):
     (default)         Voltage · Light   — electric cobalt-indigo #4C43E8, cool neutrals
     .acc-gold         Circuit Gold · Light — warm brass #C6922E, warm neutrals
     .dark             Voltage · Dark
     .acc-gold.dark    Circuit Gold · Dark
   Charcoal leads, the signature is rare. Crossing-arc mark = "bridges" (JSOOR).
   ========================================================================= */

/* ───────────────────── VOLTAGE · LIGHT (default) ───────────────────── */
:root {
  /* charcoal spine — near-neutral, faint cool */
  --char-950: oklch(0.165 0.005 260); --char-900: oklch(0.195 0.005 260);
  --char-800: oklch(0.255 0.006 258); --char-700: oklch(0.335 0.006 255);
  --char-600: oklch(0.440 0.007 252); --char-500: oklch(0.535 0.008 248);
  --char-400: oklch(0.660 0.007 248); --char-300: oklch(0.795 0.005 245);
  --char-200: oklch(0.885 0.004 244); --char-150: oklch(0.925 0.003 242);
  --char-100: oklch(0.955 0.003 240); --char-50: oklch(0.980 0.002 240);
  --white: #fff;

  /* signature accent — VOLTAGE */
  --accent: oklch(0.550 0.205 264); --accent-hover: oklch(0.500 0.200 264);
  --accent-press: oklch(0.455 0.190 264); --accent-soft: oklch(0.958 0.030 266);
  --accent-soft-bd: oklch(0.895 0.055 266); --accent-fg: oklch(0.475 0.175 264);
  --accent-ink: #fff;
  --ring: oklch(0.550 0.205 264 / 0.42);

  /* family accent — emerald */
  --emerald: oklch(0.635 0.105 186); --emerald-soft: oklch(0.958 0.033 186); --emerald-fg: oklch(0.505 0.095 186);

  /* surfaces */
  --bg: oklch(0.975 0.002 240); --sunken: oklch(0.958 0.003 242);
  --card: #fff; --raised: #fff;
  --border: oklch(0.912 0.0035 242); --border-strong: oklch(0.858 0.0045 244); --hairline: oklch(0.936 0.0028 242);

  /* ink */
  --ink: oklch(0.220 0.006 260); --ink-2: oklch(0.360 0.007 256); --muted: oklch(0.535 0.008 248); --faint: oklch(0.680 0.007 246);
  /* aliases for bridges: a legacy surface that declares --bg/--muted/--warn-bg/--font-mono
     itself cannot read them by the same name (var() cycle), so it reads these. */
  --bg-brand: oklch(0.975 0.002 240); --muted-brand: oklch(0.535 0.008 248);
  --warn-bg-t: oklch(0.962 0.045 70); --font-mono-brand: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* primary = charcoal */
  --primary: var(--char-900); --primary-hover: var(--char-800); --primary-fg: #fff;

  /* semantic states (shared L/C, hue-only; success = emerald; warn = ochre H70, clear of gold) */
  --ok-bg: oklch(0.960 0.032 186); --ok-bd: oklch(0.892 0.052 186); --ok-fg: oklch(0.470 0.090 186); --ok-dot: oklch(0.600 0.105 186);
  --info-bg: oklch(0.960 0.030 235); --info-bd: oklch(0.892 0.050 235); --info-fg: oklch(0.478 0.105 235); --info-dot: oklch(0.600 0.125 235);
  --warn-bg: oklch(0.962 0.045 70); --warn-bd: oklch(0.892 0.072 68); --warn-fg: oklch(0.480 0.088 60); --warn-dot: oklch(0.665 0.128 64);
  --bad-bg: oklch(0.961 0.032 25); --bad-bd: oklch(0.892 0.056 25); --bad-fg: oklch(0.500 0.140 25); --bad-dot: oklch(0.590 0.170 25);
  --frozen-bg: oklch(0.960 0.028 210); --frozen-bd: oklch(0.892 0.046 210); --frozen-fg: oklch(0.482 0.075 214); --frozen-dot: oklch(0.615 0.090 212);
  --guest-bg: oklch(0.961 0.032 305); --guest-bd: oklch(0.892 0.052 305); --guest-fg: oklch(0.488 0.130 305); --guest-dot: oklch(0.600 0.150 305);
  --neutral-bg: oklch(0.950 0.004 244); --neutral-bd: oklch(0.888 0.006 244); --neutral-fg: oklch(0.490 0.008 248); --neutral-dot: oklch(0.630 0.009 248);

  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-ar: "IBM Plex Sans Arabic", var(--font-sans);
  --t-hero: 3.5rem; --t-display: 2.25rem; --t-title: 1.5rem; --t-h2: 1.0625rem;
  --t-h3: 0.9375rem; --t-body-lg: 0.9375rem; --t-body: 0.8125rem; --t-meta: 0.75rem; --t-micro: 0.6875rem;
  --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.55;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-8: 48px; --s-10: 64px; --s-12: 96px;
  --r-card: 20px; --r-btn: 14px; --r-input: 12px; --r-md: 12px; --r-sm: 10px; --r-xs: 8px; --r-pill: 999px;
  --sh-1: 0 1px 2px oklch(0.20 0.01 260 / 0.05), 0 1px 1px oklch(0.20 0.01 260 / 0.04);
  --sh-2: 0 2px 6px oklch(0.20 0.01 260 / 0.06), 0 8px 20px oklch(0.20 0.01 260 / 0.05);
  --sh-3: 0 12px 36px oklch(0.18 0.01 260 / 0.12), 0 3px 8px oklch(0.18 0.01 260 / 0.07);
  --dur: 160ms; --dur-press: 120ms; --dur-pop: 200ms; --dur-drawer: 320ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1); /* drawer/sheet curve */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enter/exit */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement */
}

/* ───────────────────── CIRCUIT GOLD · LIGHT ───────────────────── */
.acc-gold {
  /* warm charcoal spine */
  --char-950: oklch(0.170 0.008 66); --char-900: oklch(0.202 0.009 66);
  --char-800: oklch(0.262 0.010 66); --char-700: oklch(0.342 0.010 66);
  --char-600: oklch(0.448 0.010 68); --char-500: oklch(0.542 0.009 70);
  --char-400: oklch(0.668 0.008 72); --char-300: oklch(0.802 0.007 74);
  --char-200: oklch(0.888 0.006 76); --char-150: oklch(0.928 0.006 78);
  --char-100: oklch(0.956 0.005 80); --char-50: oklch(0.980 0.004 82);
  /* gold accent */
  --accent: oklch(0.735 0.122 80); --accent-hover: oklch(0.700 0.126 78);
  --accent-press: oklch(0.658 0.126 77); --accent-soft: oklch(0.955 0.045 82);
  --accent-soft-bd: oklch(0.888 0.072 82); --accent-fg: oklch(0.520 0.108 74);
  --accent-ink: oklch(0.235 0.024 70);
  --ring: oklch(0.735 0.122 80 / 0.45);
  /* warm surfaces + ink */
  --bg: oklch(0.975 0.006 82); --sunken: oklch(0.958 0.008 82); --card: oklch(0.995 0.004 84); --raised: oklch(0.998 0.003 84);
  --border: oklch(0.905 0.008 78); --border-strong: oklch(0.848 0.011 76); --hairline: oklch(0.930 0.007 78);
  --ink: oklch(0.225 0.010 62); --ink-2: oklch(0.365 0.010 64); --muted: oklch(0.540 0.009 68); --faint: oklch(0.682 0.008 72);
  --bg-brand: oklch(0.975 0.006 82); --muted-brand: oklch(0.540 0.009 68); --warn-bg-t: oklch(0.962 0.045 70);
  --sh-1: 0 1px 2px oklch(0.20 0.02 66 / 0.06), 0 1px 1px oklch(0.20 0.02 66 / 0.05);
  --sh-2: 0 2px 6px oklch(0.20 0.02 66 / 0.07), 0 8px 22px oklch(0.20 0.02 66 / 0.06);
  --sh-3: 0 12px 36px oklch(0.18 0.02 66 / 0.13), 0 3px 8px oklch(0.18 0.02 66 / 0.08);
}

/* ───────────────────── DARK (shared dark neutrals; Voltage accent) ───────────────────── */
.dark {
  --bg: oklch(0.178 0.006 70); --sunken: oklch(0.208 0.006 70); --card: oklch(0.224 0.006 70); --raised: oklch(0.256 0.007 70);
  --border: oklch(1 0 0 / 0.09); --border-strong: oklch(1 0 0 / 0.17); --hairline: oklch(1 0 0 / 0.06);
  --ink: oklch(0.965 0.003 80); --ink-2: oklch(0.855 0.004 78); --muted: oklch(0.660 0.007 74); --faint: oklch(0.520 0.008 72);
  --bg-brand: oklch(0.178 0.006 70); --muted-brand: oklch(0.660 0.007 74);
  /* primary flips to a light neutral on dark */
  --primary: oklch(0.955 0.004 80); --primary-hover: oklch(0.885 0.005 80); --primary-fg: oklch(0.200 0.008 70);
  /* Voltage brightened for dark */
  --accent: oklch(0.645 0.200 264); --accent-hover: oklch(0.695 0.195 264); --accent-press: oklch(0.600 0.195 264);
  --accent-soft: oklch(0.305 0.070 264); --accent-soft-bd: oklch(0.430 0.100 264); --accent-fg: oklch(0.800 0.130 266); --accent-ink: #fff;
  --ring: oklch(0.645 0.200 264 / 0.5);
  --emerald: oklch(0.720 0.115 186); --emerald-soft: oklch(0.305 0.055 186); --emerald-fg: oklch(0.800 0.100 186);
  /* states — dark fills, bright text */
  --ok-bg: oklch(0.305 0.050 186); --ok-bd: oklch(0.420 0.070 186); --ok-fg: oklch(0.820 0.095 186); --ok-dot: oklch(0.680 0.110 186);
  --info-bg: oklch(0.305 0.055 235); --info-bd: oklch(0.425 0.080 235); --info-fg: oklch(0.815 0.090 235); --info-dot: oklch(0.680 0.120 235);
  --warn-bg: oklch(0.315 0.055 66); --warn-bd: oklch(0.440 0.078 64); --warn-fg: oklch(0.850 0.105 68); --warn-dot: oklch(0.740 0.128 64);
  --warn-bg-t: oklch(0.315 0.055 66);
  --bad-bg: oklch(0.305 0.070 25); --bad-bd: oklch(0.430 0.100 25); --bad-fg: oklch(0.815 0.110 25); --bad-dot: oklch(0.640 0.170 25);
  --frozen-bg: oklch(0.302 0.045 210); --frozen-bd: oklch(0.420 0.065 210); --frozen-fg: oklch(0.815 0.080 212); --frozen-dot: oklch(0.680 0.090 212);
  --guest-bg: oklch(0.308 0.060 305); --guest-bd: oklch(0.430 0.090 305); --guest-fg: oklch(0.815 0.110 305); --guest-dot: oklch(0.660 0.150 305);
  --neutral-bg: oklch(0.292 0.005 74); --neutral-bd: oklch(0.400 0.006 74); --neutral-fg: oklch(0.760 0.007 76); --neutral-dot: oklch(0.620 0.008 74);
  --sh-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 1px 1px oklch(0 0 0 / 0.3);
  --sh-2: 0 2px 8px oklch(0 0 0 / 0.5); --sh-3: 0 14px 40px oklch(0 0 0 / 0.6), 0 3px 8px oklch(0 0 0 / 0.4);
}

/* ───────────────────── CIRCUIT GOLD · DARK (accent group only; neutrals from .dark) ───────────────────── */
.acc-gold.dark {
  --accent: oklch(0.785 0.125 82); --accent-hover: oklch(0.825 0.120 82); --accent-press: oklch(0.740 0.125 82);
  --accent-soft: oklch(0.320 0.070 80); --accent-soft-bd: oklch(0.440 0.095 80); --accent-fg: oklch(0.825 0.095 82);
  --accent-ink: oklch(0.230 0.024 70);
  --ring: oklch(0.785 0.125 82 / 0.5);
}

/* ─────────────────────────── BASE ─────────────────────────── */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[dir="rtl"] body, body[dir="rtl"] { font-family: var(--font-ar); }
a { color: var(--accent-fg); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--font-mono); }
kbd { font-family: var(--font-mono); font-size: 0.82em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 1px 5px; background: var(--card); color: var(--muted); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--r-xs); }

/* ───────────── THE MARK — the JSOOR family mark (shared across verticals)
   Two plates, one connector — "two worlds, one connection". Gym reads it as a
   barbell; here the connector carries the tech signature. Set --mark-accent for
   emerald (family) or charcoal (mono); --mark-ink:#fff to reverse on charcoal. */
.hmark { display: block; }
.hmark-plate { fill: var(--mark-ink, var(--ink)); stroke: var(--mark-ink, var(--ink)); stroke-width: 6; stroke-linejoin: round; }
.hmark-bar { fill: var(--mark-accent, var(--accent)); }

/* ─────────────────────────── CHIPS ─────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); font-weight: 500; line-height: 1; font-size: var(--t-micro); padding: 5px 10px; white-space: nowrap; border: 1px solid transparent; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.chip--md { font-size: var(--t-meta); padding: 6px 12px; }
.chip--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); } .chip--ok .dot { background: var(--ok-dot); }
.chip--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); } .chip--info .dot { background: var(--info-dot); }
.chip--warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); } .chip--warn .dot { background: var(--warn-dot); }
.chip--bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); } .chip--bad .dot { background: var(--bad-dot); }
.chip--frozen { background: var(--frozen-bg); color: var(--frozen-fg); border-color: var(--frozen-bd); } .chip--frozen .dot { background: var(--frozen-dot); }
.chip--guest { background: var(--guest-bg); color: var(--guest-fg); border-color: var(--guest-bd); } .chip--guest .dot { background: var(--guest-dot); }
.chip--neutral { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-bd); } .chip--neutral .dot { background: var(--neutral-dot); }
.chip--accent { background: var(--accent-soft); color: var(--accent-fg); border-color: var(--accent-soft-bd); } .chip--accent .dot { background: var(--accent); }

/* ─────────────────────────── BUTTONS ─────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: var(--t-body); font-weight: 500; border-radius: var(--r-btn); padding: 10px 16px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-accent { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-outline { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--sunken); border-color: var(--char-400); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--sunken); }
.btn-danger { background: var(--bad-dot); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: var(--t-meta); border-radius: var(--r-sm); }

/* ─────────────────────────── INPUT ─────────────────────────── */
.input { width: 100%; font-family: inherit; font-size: var(--t-body); color: var(--ink); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-input); padding: 10px 13px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ─────────────────────────── CARD ─────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-1); }