/* =========================================================================
   VeriTrust Access — Design Tokens
   Dark Luxury system: deep navy + black, electric blue accent, glass + glow
   ========================================================================= */

:root {
  /* ---- Surfaces (deep navy → black) ---- */
  --bg-0: #04060c;          /* deepest — page void */
  --bg-1: #070b14;          /* page background */
  --bg-2: #0a1020;          /* base surface */
  --bg-3: #0e1626;          /* elevated surface */
  --bg-4: #131f33;          /* card hover / raised */

  /* ---- Hairlines & strokes ---- */
  --line:        rgba(148, 178, 255, 0.09);
  --line-soft:   rgba(148, 178, 255, 0.06);
  --line-strong: rgba(148, 178, 255, 0.18);
  --line-accent: rgba(46, 123, 255, 0.45);

  /* ---- Text ---- */
  --text-0: #eef3ff;        /* headings / high emphasis */
  --text-1: #c4d0ea;        /* body */
  --text-2: #8294b5;        /* muted / captions */
  --text-3: #5a6b8c;        /* faint / disabled */

  /* ---- Accent: electric blue ---- */
  --accent:        #2e7bff;
  --accent-bright: #5398ff;
  --accent-deep:   #1656d6;
  --accent-ink:    #ffffff;          /* text on accent */
  --accent-soft:   rgba(46, 123, 255, 0.14);
  --accent-glow:   rgba(46, 123, 255, 0.45);
  --cyan:          #3fd8ff;          /* secondary glow only */

  /* ---- Status ---- */
  --ok:    #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn:  #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);

  /* ---- Role accents (Section 3) ---- */
  --role-resident: #2e7bff;
  --role-guest:    #34d399;
  --role-guard:    #a78bfa;
  --role-manager:  #f59e0b;

  /* ---- Typography ---- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale */
  --fs-eyebrow: 0.78rem;
  --fs-micro:   0.8125rem;
  --fs-sm:      0.9375rem;
  --fs-base:    1.0625rem;
  --fs-lg:      1.1875rem;
  --fs-xl:      clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl:     clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --fs-3xl:     clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);
  --fs-hero:    clamp(2.6rem, 1.4rem + 5vw, 5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

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

  /* ---- Shadows & glows ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 12px 30px -12px rgba(0,0,0,0.7);
  --shadow-lg:  0 40px 80px -28px rgba(0,0,0,0.85);
  --shadow-glass: 0 24px 60px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
  --glow-accent: 0 0 0 1px var(--line-accent), 0 18px 50px -12px var(--accent-glow);
  --glow-soft:   0 0 60px -10px var(--accent-glow);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --maxw-narrow: 920px;
  --nav-h: 76px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.4s;
  --dur-slow: 0.7s;
}

/* Glass surface utility — the signature material of the product */
.glass {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 40%, rgba(8,12,22,0.4));
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--shadow-glass);
}