/* ============================================================
   Secure Access — Design Tokens
   Dark premium security theme. Single source of truth.
   ============================================================ */

:root {
  /* --- Surfaces & background --- */
  --bg:            #070912;   /* deepest background */
  --surface-1:     #11141d;   /* primary card surface */
  --surface-2:     #161a26;   /* raised / nested surface */
  --surface-3:     #1c2130;   /* hover / active surface */
  --border:        #232838;   /* hairline borders */
  --border-soft:   #1b2030;   /* subtler dividers */

  /* --- Text --- */
  --text:          #eef1f7;   /* primary */
  --text-muted:    #97a0b5;   /* secondary */
  --text-faint:    #58607a;   /* placeholder */
  --text-dim:      #6b7488;   /* tertiary / captions */

  /* --- Brand gradient (overridable by Tweaks) --- */
  --brand-a:       #5b8cff;   /* blue */
  --brand-b:       #8a5cff;   /* violet */
  --brand:         #6f86ff;   /* solid brand mid */
  --brand-grad:    linear-gradient(135deg, var(--brand-a), var(--brand-b));
  --brand-grad-soft: linear-gradient(135deg,
                      color-mix(in oklab, var(--brand-a) 22%, transparent),
                      color-mix(in oklab, var(--brand-b) 22%, transparent));

  /* --- Semantic --- */
  --success:       #37d39b;
  --warning:       #ffb547;
  --danger:        #ff5d6c;
  --success-soft:  color-mix(in oklab, var(--success) 16%, transparent);
  --warning-soft:  color-mix(in oklab, var(--warning) 16%, transparent);
  --danger-soft:   color-mix(in oklab, var(--danger) 16%, transparent);

  /* --- Radius (overridable) --- */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* --- Shadow --- */
  --shadow-sm:  0 2px 12px rgba(0,0,0,.30);
  --shadow-md:  0 8px 40px rgba(0,0,0,.35);
  --shadow-lg:  0 24px 80px rgba(0,0,0,.50);
  --glow-brand: 0 10px 40px color-mix(in oklab, var(--brand-a) 35%, transparent);

  /* --- Type --- */
  --font-sans: "Geist", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  /* --- Spacing rhythm --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
}

/* spacing rhythm continues below */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in oklab, var(--brand-a) 40%, transparent); }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 650;
}

a { color: inherit; text-decoration: none; }

/* Ambient brand glow utility */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
}
.ambient::before {
  width: 520px; height: 520px;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in oklab, var(--brand-a) 55%, transparent), transparent 70%);
}
.ambient::after {
  width: 420px; height: 420px;
  top: -80px; right: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand-b) 45%, transparent), transparent 70%);
}

/* Text gradient utility */
.grad-text {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hairline top-gradient on cards */
.card-sheen { position: relative; }
.card-sheen::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--text) 8%, transparent), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}