/* Shared Theme - Compatibility layer for standalone pages
   Provides modern design tokens + legacy var aliases + minimal reset */

:root {
  /* Primary Theme */
  --Theme1: #4cccde;
  --Theme2: #0d2a4a;
  --Theme3: #0a101a;
  --Theme4: rgba(76, 204, 222, 0.3);
  --Theme5: rgba(17, 24, 36, 0.8);

  /* Glass & Background */
  --bg-gradient: radial-gradient(55% 45% at 85% 8%, rgba(39, 145, 195, 0.26), transparent 70%), radial-gradient(45% 40% at 5% 0%, rgba(76, 204, 222, 0.13), transparent 70%), #040710;
  --glass-bg: var(--Theme5);
  --glass-bg-hover: rgba(24, 36, 52, 0.92);
  --glass-border: rgba(76, 204, 222, 0.18);
  --glass-blur: 0.875rem;
  --glass-blur-overlay: 2rem;

  /* Accent */
  --accent: var(--Theme1);
  --accent-hover: #8ae4f0;
  --accent-ink: #04222a;                       /* text colour on accent fills */
  --grad-accent: linear-gradient(135deg, #4cccde, #2791c3);
  --grad-text: linear-gradient(115deg, #9be9f4 0%, #4cccde 45%, #6ea8ff 100%);
  --line: rgba(76, 204, 222, 0.18);
  --card-bg: linear-gradient(160deg, rgba(20, 32, 48, 0.88), rgba(10, 16, 26, 0.92));
  --accent-glow: rgba(76, 204, 222, 0.4);
  --success-glow: rgba(78, 227, 160, 0.4);
  --danger-glow: rgba(255, 138, 138, 0.4);

  /* Text */
  --text-main: #ffffff;
  --text-muted: #c9d3da;
  --text-subtle: #8fa0ab;

  /* Status */
  --success: #4ee3a0;      /* style guide: positive */
  --success-bg: rgba(78, 227, 160, 0.15);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --danger: #ff8a8a;       /* style guide: negative */
  --danger-bg: rgba(255, 138, 138, 0.15);

  /* Form */
  --input-bg: rgba(255, 255, 255, 0.05);
  /* ————— Website design system tokens (see shared/style_guide.html) ————— */
  --bg:         #040710;
  --bg-alt:     #0a101a;
  --bg-card:    rgba(17, 24, 36, 0.8);
  --accent-2:   #2791c3;
  --text:       #c9d3da;
  --text-dim:   #8fa0ab;
  --heading:    #ffffff;
  --radius:     1rem;
  --shadow:     0 1rem 2.5rem rgba(0, 0, 0, 0.45);

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999rem;
  --Radious1: 0.25rem;
  --Radious2: 0.25rem;
  --Radious3: 0.25rem;
  --Radious4: 0.4rem;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shadows */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.3);
  --shadow-md: 0 0.375rem 0.75rem rgba(0,0,0,0.4);
  --shadow-lg: 0 0.75rem 1.5rem rgba(0,0,0,0.5);
  --shadow-xl: 0 1rem 3rem rgba(0,0,0,0.6);

  /* Legacy aliases (for older page CSS) */
  --GreyDark: #000000;
  --GreyLight: #0a0a0a;
  --BoxType1: rgba(255, 255, 255, 0.04);
  --NavigationBackground: rgb(4 7 16);
  --NavigationBackground2: rgb(9 15 24);
  --nav_app_title: #FFFFFF;
  --PageName: #FFFFFF;
  --NavText: #707070;
  --NavHover: #FFFFFF;
  --NavDropSelected: #FFFFFF;
  --Text1: #FFFFFF;
  --Text2: #8fa0ab;
  --Text3: #8C8C8C;
  --Green1: #4FB84A;
  --Green2: #265625;
  --Green3: #0d260d;
  --Blue1: #4A88B8;
  --Blue2: #2b5379;
  --Blue3: #182839;
  --Red1: #d64545;
  --Red2: rgb(110, 29, 29);
  --Red3: rgb(70, 13, 13);
  --Orange1: #e66e32;
  --Orange2: #b23d1c;
  --Orange3: #3e130c;
}

/* Minimal reset for standalone pages */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html * {
  font-family: "Inter", system-ui, "Segoe UI", Roboto, "DejaVu Sans", sans-serif;
}
body {
  line-height: 1.4;
  color: white;
  background: var(--bg-gradient);
  min-height: 100vh;
  min-height: 100dvh;
}
a { text-decoration: none; color: inherit; }
ol, ul { list-style: none; margin: 0; padding: 0; }
img {
  user-select: none;
  -webkit-user-drag: none;
}
input, select, textarea {
  padding: 0.3rem;
  box-sizing: border-box;
  border: 0.1rem solid rgb(255 255 255 / 8%);
  color: white;
  background-color: rgb(255 255 255 / 5%);
  border-radius: 0.3rem;
  width: 100%;
  font-size: 1rem;
}
input:focus, textarea:focus, select:focus { outline: none; }
input[type="checkbox"] { accent-color: #008cff; }
h1, h2, h3, h4, h5, h6 { color: white; margin: 0; }
p { font-size: 0.9rem; color: var(--Text2); line-height: 1.2rem; }
span { font-size: 0.9rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 0.4rem; }
::-webkit-scrollbar-track { background: #2d2d2d; }
::-webkit-scrollbar-thumb { background: #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: #f1f1f1; }

/* ————— Keyboard focus (accessibility) —————
   :focus-visible only shows for keyboard users, so mouse/touch clicks look unchanged.
   Inputs keep their own focus style. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible {
  outline: 0.125rem solid var(--accent) !important;
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.3rem rgba(76, 204, 222, 0.25);
}