/* =====================================================================
   The Cantina — shared Rebel and Imperial palettes.
   Link this AFTER the page's own <style>, so the galactic looks win over
   the page's Classic colours:  <link rel="stylesheet" href="shared/looks.css">

   Rebel = Flight suit, Imperial = Command deck (both chosen 19 Oct 2026).

   Variables every tool can use beyond the usual --bg/--text/--accent set:
     --secondary, --secondary-soft   second colour of the look (harness charcoal / console blue)
     --body-bg      full page background (texture included)
     --hdr-bg       header background
     --stripe, --stripe-h            the band under the header
     --panel-bg     card/panel fill
     --note-bg, --note-border        info boxes
     --scrim        overlay behind spinners and sheets
   ===================================================================== */

/* ---------- fonts and shape ---------- */
:root[data-look="rebel"] { --display: "Saira Stencil One", var(--font); --ui: "Saira Condensed", var(--font); --radius: 2px; }
:root[data-look="imperial"] { --display: "Michroma", var(--font); --ui: "Rajdhani", var(--font); --radius: 0px; }

/* ---------- Rebel — Flight suit (chosen 19 Oct) ----------
   Hi-vis pilot orange is the canvas. Off-white flak-vest panels with
   charcoal harness straps; the header is the helmet-black bar. */
:root[data-look="rebel"] {
  color-scheme: light;
  --bg: #e8641c; --bg-elev: #f4f1e9; --bg-elev-2: #e7e2d6; --bg-input: #fbfaf6;
  --text: #1b1712; --text-dim: #3d1d08;
  --accent: #1d1e21; --accent-text: #ff8a3d; --accent-soft: rgba(29, 30, 33, .13);
  --secondary: #2b2c2f; --secondary-soft: rgba(43, 44, 47, .1);
  --border: rgba(45, 22, 6, .24); --danger: #a8240f; --danger-soft: rgba(168, 36, 15, .1);
  --owe: #b52e12; --owed: #3d6a1c; --success: #3d6a1c;
  --hdr-bg: #1b1c1f;
  --stripe: repeating-linear-gradient(90deg, #f4f1e9 0 26px, #c9c3b5 26px 28px); --stripe-h: 6px;
  --panel-bg: var(--bg-elev);
  --note-bg: rgba(29, 30, 33, .07); --note-border: rgba(29, 30, 33, .28);
  --scrim: rgba(244, 241, 233, .95);
  --body-bg:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(255, 220, 180, .22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(60, 20, 0, .09) 0 1px, transparent 1px 360px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .035) 0 1px, transparent 1px 4px),
    #e8641c;
}
/* The header is a black bar, so its own text, inputs and active switch go light/orange */
[data-look="rebel"] .site-header, [data-look="rebel"] .look-header {
  color-scheme: dark;
  --text: #f4f1e9; --text-dim: #b9b4a8; --border: #3a3b3f;
  --bg-input: #26272a; --bg-elev: #26272a; --bg-elev-2: #303135;
  --accent: #f07b2c; --accent-text: #1b1209; --accent-soft: rgba(240, 123, 44, .15);
  --surface: #26272a; --surface-2: #303135; --muted: #b9b4a8; --faint: #8f8a7f; --border-strong: #4a4b50; --accent-hover: #ff8f45;
}
[data-look="rebel"] .site-header .brand .mark { color: #f07b2c; }

/* ---------- Imperial — Command deck ----------
   Black glass, command red, console lights, a field of stars. */
:root[data-look="imperial"] {
  color-scheme: dark;
  --bg: #050608; --bg-elev: #121418; --bg-elev-2: #1c1f24; --bg-input: #08090b;
  --text: #eef0f2; --text-dim: #8c939c;
  --accent: #d8282f; --accent-text: #ffffff; --accent-soft: rgba(216, 40, 47, .13);
  --secondary: #9fd0ff; --secondary-soft: rgba(159, 208, 255, .1);
  --border: #2b2f35; --danger: #ff5c5c; --danger-soft: rgba(255, 92, 92, .12);
  --owe: #ff6b6b; --owed: #dfe6ee; --success: #dfe6ee;
  --hdr-bg: linear-gradient(180deg, #16181c, #0d0e11);
  --stripe: repeating-linear-gradient(90deg, #d8282f 0 7px, transparent 7px 13px, #9fd0ff 13px 18px, transparent 18px 26px, #6e7680 26px 30px, transparent 30px 40px); --stripe-h: 3px;
  --panel-bg: linear-gradient(180deg, #17191d, #0f1114);
  --note-bg: rgba(159, 208, 255, .07); --note-border: rgba(159, 208, 255, .3);
  --scrim: rgba(5, 6, 8, .93);
  --body-bg:
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, .75), transparent 1.5px) 0 0 / 197px 197px,
    radial-gradient(1px 1px at 120px 88px, rgba(200, 225, 255, .55), transparent 1.5px) 0 0 / 263px 263px,
    radial-gradient(1.5px 1.5px at 70px 150px, rgba(255, 255, 255, .5), transparent 2px) 0 0 / 331px 331px,
    #050608;
}

/* ---------- shared galactic structure ---------- */
:root[data-look="rebel"] body, :root[data-look="imperial"] body { background: var(--body-bg); background-attachment: fixed; }
[data-look="rebel"] .site-header, [data-look="imperial"] .site-header,
[data-look="rebel"] .look-header, [data-look="imperial"] .look-header {
  position: sticky; background: var(--hdr-bg); border-bottom-color: transparent; color: var(--text);
}
[data-look="rebel"] .site-header::after, [data-look="imperial"] .site-header::after,
[data-look="rebel"] .look-header::after, [data-look="imperial"] .look-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--stripe-h)); height: var(--stripe-h);
  background: var(--stripe); pointer-events: none;
}
[data-look="imperial"] .site-header::after, [data-look="imperial"] .look-header::after { left: 24px; right: 24px; }
[data-look="rebel"] .note, [data-look="imperial"] .note { background: var(--note-bg); border-color: var(--note-border); }

/* =====================================================================
   Common variable names used by the other tools (Hyperlog, Holoseal,
   Kesselledger …), mapped onto the look's palette.
   ===================================================================== */
:root[data-look="rebel"] {
  --surface: var(--bg-elev); --surface-2: var(--bg-elev-2);
  --muted: #4a3a2c; --faint: #6b5c4e; --border-strong: rgba(45, 22, 6, .42);
  --accent-hover: #000000; --good: #3d6a1c; --good-soft: rgba(61, 106, 28, .12); --ok: #3d6a1c;
  --warn: #9a4a00; --warn-soft: rgba(154, 74, 0, .12);
  --grid: rgba(45, 22, 6, .12); --axis: rgba(45, 22, 6, .35);
  --s-blue: #2f5d8a; --s-orange: #d9561a; --s-aqua: #3d6a1c;
  --shadow: 0 2px 0 rgba(60, 20, 0, .18);
}
:root[data-look="imperial"] {
  --surface: var(--bg-elev); --surface-2: var(--bg-elev-2);
  --muted: #9aa1aa; --faint: #6c737c; --border-strong: #3d424a;
  --accent-hover: #ef3a41; --good: #dfe6ee; --good-soft: rgba(223, 230, 238, .1); --ok: #9fd0ff;
  --warn: #ffb347; --warn-soft: rgba(255, 179, 71, .1);
  --grid: #1c2026; --axis: #3d424a;
  --s-blue: #9fd0ff; --s-orange: #d8282f; --s-aqua: #e8edf2;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 10px 30px rgba(0, 0, 0, .5);
}

/* =====================================================================
   Component kit for tools that opt in with <body class="look-kit">.
   Uses the class names the tools share (.card, .btn, .nav, .seg …).
   ===================================================================== */
/* Rebel: stencil headings, condensed controls, harness-strap panels */
[data-look="rebel"] .look-kit :is(h1, h2, h3, .brand) { font-family: var(--display); font-weight: 400; letter-spacing: .03em; }
[data-look="rebel"] .look-kit :is(.btn, .nav button, .seg button, th, .badge, .field > span, .tile .label, .pill-count) { font-family: var(--ui); letter-spacing: .03em; }
[data-look="rebel"] .look-kit :is(.btn, .nav button, .seg button) { font-size: 1.04em; }
[data-look="rebel"] .look-kit .card { border-radius: 0; box-shadow: inset 4px 0 0 var(--secondary), var(--shadow); border-color: rgba(45, 22, 6, .3); }
[data-look="rebel"] .look-kit :is(.btn, input, select, textarea, .seg, .seg button, .banner, .badge, .modal, .tooltip, .icon-btn, .nav button) { border-radius: 2px; }
[data-look="rebel"] .look-kit .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
[data-look="rebel"] .look-kit .look-header .btn.primary { background: #f07b2c; border-color: #f07b2c; color: #1b1209; }
[data-look="rebel"] .look-kit .look-header .nav button.active { background: #f07b2c; color: #1b1209; }
[data-look="rebel"] .look-kit .tile .value { font-family: var(--ui); font-weight: 600; letter-spacing: .01em; }
[data-look="rebel"] .look-kit th { background: var(--bg-elev-2); }

/* Imperial: precise wide headings, Rajdhani controls, red-edged black glass */
[data-look="imperial"] .look-kit :is(h1, h2, h3, .brand) { font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
[data-look="imperial"] .look-kit h1 { font-size: 19px; }
[data-look="imperial"] .look-kit :is(h2, h3) { font-size: 13.5px; }
[data-look="imperial"] .look-kit .brand { font-size: 14px; }
[data-look="imperial"] .look-kit :is(.btn, .nav button, .seg button, th, .badge, .field > span, .tile .label, .pill-count) { font-family: var(--ui); font-weight: 700; letter-spacing: .05em; }
[data-look="imperial"] .look-kit :is(.btn, .nav button, .seg button) { font-size: 1.08em; }
[data-look="imperial"] .look-kit .card { border-radius: 0; background: var(--panel-bg); border-left: 2px solid var(--accent); }
[data-look="imperial"] .look-kit :is(.btn, input, select, textarea, .seg, .seg button, .banner, .badge, .modal, .tooltip, .icon-btn, .nav button) { border-radius: 0; }
[data-look="imperial"] .look-kit .nav button.active { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
[data-look="imperial"] .look-kit .tile .value { font-family: var(--ui); font-weight: 700; font-size: 27px; letter-spacing: .02em; }

/* =====================================================================
   Tools built on shadcn-style tokens (Fluxline, SmartRug, MoorBnB) opt in
   with <html data-tokens="shadcn">. Their --secondary means "secondary
   button", so it is remapped here rather than used as the look's colour.
   ===================================================================== */
:root[data-look="rebel"][data-tokens="shadcn"] {
  --background: #e8641c; --foreground: #1b1712; --card: #f4f1e9; --card-foreground: #1b1712; --popover: #f4f1e9; --popover-foreground: #1b1712;
  --primary: #1d1e21; --primary-hover: #000000; --primary-foreground: #ff8a3d;
  --secondary: #e7e2d6; --secondary-foreground: #1b1712; --muted: #e7e2d6; --muted-foreground: #4a3a2c;
  --accent: #ece5d6; --accent-foreground: #1b1712; --destructive: #a8240f; --destructive-foreground: #ffffff;
  --border: rgba(45, 22, 6, .24); --input: rgba(45, 22, 6, .32); --ring: #1d1e21;
  --header-bg: #1b1c1f; --badge-bg: #1d1e21; --sidebar-bg: #1d1e21; --gold: #1d1e21;
  --font-heading: "Saira Stencil One", sans-serif; --font-display: "Saira Stencil One", sans-serif;
  --radius: 2px; --shadow: 0 2px 0 rgba(60, 20, 0, .18);
}
:root[data-look="rebel"][data-tokens="shadcn"] .look-header {
  --foreground: #f4f1e9; --muted-foreground: #b9b4a8; --card: #26272a; --border: #3a3b3f; --input: #3a3b3f;
  --secondary: #303135; --secondary-foreground: #f4f1e9; --muted: #303135; --accent: #303135; --accent-foreground: #f4f1e9;
  --primary: #f07b2c; --primary-hover: #ff8f45; --primary-foreground: #1b1209; --ring: #f07b2c;
}
:root[data-look="imperial"][data-tokens="shadcn"] {
  --background: #050608; --foreground: #eef0f2; --card: #121418; --card-foreground: #eef0f2; --popover: #121418; --popover-foreground: #eef0f2;
  --primary: #d8282f; --primary-hover: #ef3a41; --primary-foreground: #ffffff;
  --secondary: #1c1f24; --secondary-foreground: #eef0f2; --muted: #1c1f24; --muted-foreground: #8c939c;
  --accent: #1c1f24; --accent-foreground: #eef0f2; --destructive: #ff5c5c; --destructive-foreground: #050608;
  --border: #2b2f35; --input: #2b2f35; --ring: #d8282f;
  --header-bg: #0d0e11; --badge-bg: #d8282f; --sidebar-bg: #0d0e11; --gold: #9fd0ff;
  --font-heading: "Michroma", sans-serif; --font-display: "Michroma", sans-serif;
  --radius: 0px; --shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 10px 30px rgba(0, 0, 0, .5);
}
[data-tokens="shadcn"][data-look="rebel"] :is(h1, h2, h3, .brand) { font-family: var(--display); font-weight: 400; letter-spacing: .03em; }
[data-tokens="shadcn"][data-look="imperial"] :is(h1, h2, h3, .brand) { font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
[data-tokens="shadcn"][data-look="imperial"] h1 { font-size: 21px; }
[data-tokens="shadcn"][data-look="imperial"] :is(h2, h3) { font-size: 14px; }
[data-tokens="shadcn"][data-look="rebel"] :is(button, .btn, th, label, .badge, .tab) { font-family: var(--ui); letter-spacing: .02em; }
[data-tokens="shadcn"][data-look="imperial"] :is(button, .btn, th, label, .badge, .tab) { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; }
[data-tokens="shadcn"][data-look="imperial"] .card { border-left: 2px solid #d8282f; }
[data-tokens="shadcn"][data-look="rebel"] .card { box-shadow: inset 4px 0 0 #2b2c2f, var(--shadow); }
/* the look switch uses shadcn's primary colours in these tools */
[data-tokens="shadcn"] .look-pick.s1 { background: var(--secondary); border-color: var(--border); }
[data-tokens="shadcn"] .look-pick.s1 button { color: var(--muted-foreground); }
[data-tokens="shadcn"] .look-pick.s1 button[aria-checked="true"] { background: var(--primary); color: var(--primary-foreground); }