/* Rack Glass tokens. Every colour, radius, space and type size the app uses comes from here.
   Theme: dark by default, light when the OS asks for it, or when <html data-theme="light|dark"> forces one.
   Look (flat): quiet tinted-neutral surfaces in steps with hairlines, one accent for the main action and the selection,
   no glass, glows, colour washes or overshoot. Tuned with the unslop method (see README credits). */

@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ---- identity: the only per-app value (accent hue) */
:root { --h: 188; }

/* ---- shape, space, type, motion (same in both themes) */
:root {
  --r-xs: 3px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-btn: 14px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  --control-h: 36px;

  --font: "Inter Variable", "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --blur: 0px;
  --dur-1: 120ms; /* hover, press, colour changes */
  --dur-2: 200ms; /* things appearing: views, sections, notes */
  --dur-3: 260ms; /* sheets and rows moving */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (pointer: coarse) {
  :root { --control-h: 44px; }
}

/* ---- dark (default) */
:root {
  color-scheme: dark;
  --ground-base: oklch(0.13 0.004 var(--h));
  --ground-1: oklch(0.235 0.065 var(--h));
  --ground-2: oklch(0.205 0.06 calc(var(--h) + 30));
  --ground-3: oklch(0.205 0.06 calc(var(--h) - 25));
  --ink: oklch(0.96 0.005 var(--h));
  --ink-muted: oklch(0.72 0.012 var(--h));
  --hair: oklch(0.96 0.005 var(--h) / 0.09);
  --glass: oklch(0.16 0.005 var(--h));   /* the window / big panels */
  --card: oklch(0.18 0.005 var(--h));  /* cards and panels */
  --field: oklch(0.215 0.006 var(--h));   /* inputs, secondary buttons, raised bits */
  --float: oklch(0.2 0.006 var(--h));   /* bars that float over content */
  --solid: oklch(0.22 0.006 var(--h));        /* menus, dialogs, sheets: never see-through */
  --sunken: oklch(0.105 0.004 var(--h));
  --edge: oklch(1 0 0 / 0.09);
  --a: oklch(0.85 0.16 var(--h));
  --a-2: oklch(0.795 0.14 calc(var(--h) + 8));
  --on-a: oklch(0.2 0.03 270);
  --accent-text-c: oklch(0.88 0.11 var(--h));
  --shadow-c: oklch(0 0 0 / 0.5);
  --good: oklch(0.74 0.15 150); --good-ink: oklch(0.84 0.14 150);
  --warn: oklch(0.8 0.14 80);   --warn-ink: oklch(0.86 0.12 80);
  --bad: oklch(0.7 0.19 25);    --bad-ink: oklch(0.82 0.13 25);
  --info-ink: oklch(0.8 0.12 258);
  --red: oklch(0.7 0.19 25);    --blue: oklch(0.7 0.16 258);
  --track: oklch(0.96 0.005 var(--h) / 0.14);
  --border-ctl: oklch(0.62 0.01 var(--h));
}

/* ---- light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground-base: oklch(0.955 0.004 var(--h));
    --ground-1: oklch(0.915 0.05 var(--h));
    --ground-2: oklch(0.895 0.055 calc(var(--h) + 30));
    --ground-3: oklch(0.895 0.055 calc(var(--h) - 25));
    --ink: oklch(0.22 0.008 var(--h));
    --ink-muted: oklch(0.46 0.01 var(--h));
    --hair: oklch(0.22 0.008 var(--h) / 0.1);
    --glass: oklch(0.985 0.003 var(--h));
    --card: oklch(0.995 0.002 var(--h));
    --field: oklch(0.97 0.004 var(--h));
    --float: oklch(0.995 0.002 var(--h));
    --solid: oklch(1 0 0);
    --sunken: oklch(0.22 0.008 var(--h) / 0.06);
    --edge: oklch(0.22 0.008 var(--h) / 0.1);
    --a: oklch(0.5 0.17 var(--h));
    --a-2: oklch(0.5 0.17 calc(var(--h) + 8));
    --on-a: oklch(1 0 0);
    --accent-text-c: oklch(0.42 0.17 var(--h));
    --shadow-c: oklch(0.25 0.005 var(--h) / 0.12);
    --good: oklch(0.6 0.15 150);  --good-ink: oklch(0.4 0.12 150);
    --warn: oklch(0.72 0.15 75);  --warn-ink: oklch(0.44 0.1 70);
    --bad: oklch(0.6 0.2 25);     --bad-ink: oklch(0.46 0.17 25);
    --info-ink: oklch(0.48 0.17 258);
    --red: oklch(0.58 0.21 25);   --blue: oklch(0.52 0.2 258);
    --track: oklch(0.22 0.008 var(--h) / 0.12);
    --border-ctl: oklch(0.52 0.01 var(--h));
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground-base: oklch(0.955 0.004 var(--h));
  --ground-1: oklch(0.915 0.05 var(--h));
  --ground-2: oklch(0.895 0.055 calc(var(--h) + 30));
  --ground-3: oklch(0.895 0.055 calc(var(--h) - 25));
  --ink: oklch(0.22 0.008 var(--h));
  --ink-muted: oklch(0.46 0.01 var(--h));
  --hair: oklch(0.22 0.008 var(--h) / 0.1);
  --glass: oklch(0.985 0.003 var(--h));
  --card: oklch(0.995 0.002 var(--h));
  --field: oklch(0.97 0.004 var(--h));
  --float: oklch(0.995 0.002 var(--h));
  --solid: oklch(1 0 0);
  --sunken: oklch(0.22 0.008 var(--h) / 0.06);
  --edge: oklch(0.22 0.008 var(--h) / 0.1);
  --a: oklch(0.5 0.17 var(--h));
  --a-2: oklch(0.5 0.17 calc(var(--h) + 8));
  --on-a: oklch(1 0 0);
  --accent-text-c: oklch(0.42 0.17 var(--h));
  --shadow-c: oklch(0.25 0.005 var(--h) / 0.12);
  --good: oklch(0.6 0.15 150);  --good-ink: oklch(0.4 0.12 150);
  --warn: oklch(0.72 0.15 75);  --warn-ink: oklch(0.44 0.1 70);
  --bad: oklch(0.6 0.2 25);     --bad-ink: oklch(0.46 0.17 25);
  --info-ink: oklch(0.48 0.17 258);
  --red: oklch(0.58 0.21 25);   --blue: oklch(0.52 0.2 258);
  --track: oklch(0.22 0.008 var(--h) / 0.12);
  --border-ctl: oklch(0.52 0.01 var(--h));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground-base: oklch(0.13 0.004 var(--h));
  --ground-1: oklch(0.235 0.065 var(--h));
  --ground-2: oklch(0.205 0.06 calc(var(--h) + 30));
  --ground-3: oklch(0.205 0.06 calc(var(--h) - 25));
  --ink: oklch(0.96 0.005 var(--h));
  --ink-muted: oklch(0.72 0.012 var(--h));
  --hair: oklch(0.96 0.005 var(--h) / 0.09);
  --glass: oklch(0.16 0.005 var(--h));
  --card: oklch(0.18 0.005 var(--h));
  --field: oklch(0.215 0.006 var(--h));
  --float: oklch(0.2 0.006 var(--h));
  --solid: oklch(0.22 0.006 var(--h));
  --sunken: oklch(0.105 0.004 var(--h));
  --edge: oklch(1 0 0 / 0.09);
  --a: oklch(0.85 0.16 var(--h));
  --a-2: oklch(0.795 0.14 calc(var(--h) + 8));
  --on-a: oklch(0.2 0.03 270);
  --accent-text-c: oklch(0.88 0.11 var(--h));
  --shadow-c: oklch(0 0 0 / 0.5);
  --good: oklch(0.74 0.15 150); --good-ink: oklch(0.84 0.14 150);
  --warn: oklch(0.8 0.14 80);   --warn-ink: oklch(0.86 0.12 80);
  --bad: oklch(0.7 0.19 25);    --bad-ink: oklch(0.82 0.13 25);
  --info-ink: oklch(0.8 0.12 258);
  --red: oklch(0.7 0.19 25);    --blue: oklch(0.7 0.16 258);
  --track: oklch(0.96 0.005 var(--h) / 0.14);
  --border-ctl: oklch(0.62 0.01 var(--h));
}

/* ---- derived (same in both themes) */
:root {
  --ground-mesh: var(--ground-base);
  --accent-fill: var(--a);
  --a-soft: color-mix(in oklch, var(--a) 16%, transparent);
  --glow: 0 0 0 0 transparent;
  --glow-lg: 0 0 0 0 transparent;
  --shadow-window: inset 0 1px 0 oklch(1 0 0 / 0.05), 0 1px 2px -1px var(--shadow-c);
  --shadow-card: inset 0 1px 0 oklch(1 0 0 / 0.045), 0 1px 2px -1px var(--shadow-c);
  --shadow-pop: 0 12px 32px -12px var(--shadow-c), 0 1px 3px -1px var(--shadow-c);
}

/* ---- the Rack Suite names the app's CSS already uses, now backed by the glass tokens */
:root {
  --ground: var(--ground-base);
  --surface: var(--card);
  --surface-raised: var(--field);
  --surface-sunken: var(--sunken);
  --surface-track: var(--track);
  --hairline: var(--hair);
  --border-control: var(--border-ctl);
  --accent: var(--a);
  --on-accent: var(--on-a);
  --accent-text: var(--accent-text-c);
  --accent-soft: var(--a-soft);
  --success: var(--good-ink);
  --warning: var(--warn-ink);
  --danger: var(--bad-ink);
  --info: var(--info-ink);
  --success-soft: color-mix(in oklch, var(--good) 20%, transparent);
  --warning-soft: color-mix(in oklch, var(--warn) 24%, transparent);
  --danger-soft: color-mix(in oklch, var(--bad) 18%, transparent);
  --info-soft: color-mix(in oklch, var(--info-ink) 18%, transparent);
  --soft-a: 18%;
  --tint-hover: 8%;
  --tint-press: 14%;
}

/* ---- people who ask for less transparency, or browsers without blur, get solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  :root { --blur: 0px; --glass: var(--solid); --card: var(--solid); --field: var(--solid); --float: var(--solid); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: var(--solid); --card: var(--solid); --field: var(--solid); --float: var(--solid); }
}

/* ---- Recon extras: tint of our own alliance on the Matches tab, and the two secondary accents */
:root { --mine-a: 26%; --accent-2: #a6ece5; --accent-3: #2a9d93; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --mine-a: 17%; --accent-2: #2a9d93; --accent-3: #7fcfc7; } }
:root[data-theme="light"] { --mine-a: 17%; --accent-2: #2a9d93; --accent-3: #7fcfc7; }

/* ---- VEX alliance colours: set by the game, so they never change with the accent.
   Same hues as danger / info so they sit with the suite, but kept separate because they mean "red/blue alliance",
   not "error/info". */
:root {
  --alliance-red: #f28b82;
  --alliance-blue: #8ab4f8;
  --on-alliance: #202124;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --alliance-red: #c5221f;
    --alliance-blue: #1967d2;
    --on-alliance: #ffffff;
  }
}
:root[data-theme="light"] {
  --alliance-red: #c5221f;
  --alliance-blue: #1967d2;
  --on-alliance: #ffffff;
}
:root {
  --alliance-red-soft: color-mix(in srgb, var(--alliance-red) var(--soft-a), transparent);
  --alliance-blue-soft: color-mix(in srgb, var(--alliance-blue) var(--soft-a), transparent);
}

/* ---- elevation: the floating tab bar, a dragged picklist row, the dimmed page behind the team sheet */
:root {
  --shadow-float: 0 14px 34px -14px var(--shadow-c);
  --shadow-drag: var(--shadow-pop);
  --scrim: oklch(0.1 0.03 var(--h) / 0.55);
}

/* ---- the Invictus logo comes in a light (white) and a dark version */
:root {
  --logo-on-dark: block;
  --logo-on-light: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --logo-on-dark: none;
    --logo-on-light: block;
  }
}
:root[data-theme="light"] {
  --logo-on-dark: none;
  --logo-on-light: block;
}

/* ---- glass controls: buttons, pills and floating bars get a translucent sheen, a lit top edge and a soft blur */
:root {
  --blur-ctl: 16px;
  --g-fill: linear-gradient(150deg, oklch(1 0 0 / 0.11), oklch(1 0 0 / 0.03) 55%, oklch(1 0 0 / 0.06));
  --g-edge: inset 0 1px 0 oklch(1 0 0 / 0.17), inset 0 0 0 1px oklch(1 0 0 / 0.05);
  --g-drop: 0 8px 20px -10px oklch(0 0 0 / 0.65);
  --g-bar: color-mix(in oklch, var(--float) 58%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --g-fill: linear-gradient(150deg, oklch(1 0 0 / 0.95), oklch(1 0 0 / 0.5) 60%, oklch(1 0 0 / 0.75));
    --g-edge: inset 0 1px 0 oklch(1 0 0 / 1), inset 0 0 0 1px oklch(0.22 0.008 var(--h) / 0.07);
    --g-drop: 0 8px 18px -10px oklch(0.25 0.005 var(--h) / 0.3);
  }
}
:root[data-theme="light"] {
  --g-fill: linear-gradient(150deg, oklch(1 0 0 / 0.95), oklch(1 0 0 / 0.5) 60%, oklch(1 0 0 / 0.75));
  --g-edge: inset 0 1px 0 oklch(1 0 0 / 1), inset 0 0 0 1px oklch(0.22 0.008 var(--h) / 0.07);
  --g-drop: 0 8px 18px -10px oklch(0.25 0.005 var(--h) / 0.3);
}
:root[data-theme="dark"] {
  --g-fill: linear-gradient(150deg, oklch(1 0 0 / 0.11), oklch(1 0 0 / 0.03) 55%, oklch(1 0 0 / 0.06));
  --g-edge: inset 0 1px 0 oklch(1 0 0 / 0.17), inset 0 0 0 1px oklch(1 0 0 / 0.05);
  --g-drop: 0 8px 20px -10px oklch(0 0 0 / 0.65);
}