/**
 * tomasetti-tokens.css — shared design tokens for every portal
 *
 * Layers:
 *   1. Reset & base    — box-sizing, scroll, safe-area
 *   2. Core tokens     — --t-* purple family (shop/admin/apex)
 *   3. Shared objects  — pride bar, glass card, focus ring, animations
 *   4. Powered footer  — .tomasetti-powered
 *
 * Override locally: set different --t-accent / --t-bg / etc on :root in each page.
 * Portal-specific pages (bill.leebens.com, family, mrtom) keep their own palettes
 * — they set :root vars that override these defaults.
 */

/* ========================================================================
   1. RESET & BASE
   ======================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Safe-area helpers — portals use these in padding shorthand */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ========================================================================
   2. CORE TOKENS — Tomasetti purple system (apex / shop / admin / hub)
   ======================================================================== */
:root {
  /* Backgrounds */
  --t-bg:            #0f0a1a;
  --t-bg-deep:       #0a0514;
  --t-surface:       #1e1530;
  --t-surface-hover: #2a1d40;
  --t-card-bg:       rgba(30, 21, 48, 0.85);
  --t-panel:         rgba(20, 15, 45, 0.86);
  --t-panel-2:       rgba(28, 22, 61, 0.94);

  /* Purple accent family */
  --t-accent:        #d896ff;
  --t-accent-dim:    #9d50e5;
  --t-accent-bright: #c084fc;
  --t-accent-muted:  #7c3aed;
  --t-violet:        #a855f7;
  --t-violet-soft:   #c084fc;
  --t-violet-mute:   #a78bfa;
  --t-ink:           #e2d9ee;
  --t-ink-soft:      #ddd6fe;
  --t-ink-mid:       #bca8d0;
  --t-ink-mute:      #9a88b0;
  --t-ink-bright:    #ffffff;

  /* Status colors */
  --t-green:         #34d399;
  --t-green-dim:     #059669;
  --t-amber:         #fbbf24;
  --t-amber-deep:    #d97706;
  --t-red:           #f87171;
  --t-danger:        #ef4444;
  --t-sky:           #7dd3fc;
  --t-mint:          #6ee7b7;
  --t-gold:          #d4af37;
  --t-fuchsia:       #e879f9;

  /* Borders & lines */
  --t-border:        rgba(216, 150, 255, 0.12);
  --t-border-hover:  rgba(216, 150, 255, 0.30);
  --t-line:          rgba(168, 85, 247, 0.30);
  --t-line-hard:     rgba(192, 132, 252, 0.40);

  /* Shadows & glow */
  --t-shadow:        0 18px 40px rgba(76, 29, 149, 0.35);
  --t-shadow-sm:     0 8px 24px rgba(76, 29, 149, 0.25);
  --t-glow:          rgba(168, 85, 247, 0.15);
  --t-glow-strong:   rgba(168, 85, 247, 0.30);

  /* Radii */
  --t-radius:        16px;
  --t-radius-sm:     12px;
  --t-radius-lg:     24px;
  --t-radius-pill:   99px;

  /* Spacing scale (used by portals via calc) */
  --t-space-xs:      .25rem;
  --t-space-sm:      .5rem;
  --t-space-md:      1rem;
  --t-space-lg:      1.5rem;
  --t-space-xl:      2rem;

  /* Typography */
  --t-font-display:  "Outfit", system-ui, sans-serif;
  --t-font-ui:       "Outfit", "Nunito", system-ui, sans-serif;
  --t-font-mono:     "Share Tech Mono", ui-monospace, monospace;
  --t-font-size:     18px;

  /* Motion */
  --t-t:             0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-t-fast:        0.15s ease;
  --t-t-slow:        0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   3. SHARED OBJECTS
   ======================================================================== */

/* --- Pride bar (rainbow top strip on every portal) --- */
.t-pride {
  width: 100%;
  height: 6px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    #e40303 0%, #ff8c00 14%, #ffed00 28%,
    #008026 42%, #004dff 57%, #750787 72%,
    #d896ff 86%, #ff69b4 100%
  );
}

/* --- Glass card (dark, translucent, with border + glow) --- */
.t-glass {
  background: var(--t-card-bg, rgba(30,21,48,0.85));
  border: 1px solid var(--t-border, rgba(216,150,255,0.12));
  border-radius: var(--t-radius, 16px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.t-glass-hover {
  transition: var(--t-t, 0.25s cubic-bezier(0.4,0,0.2,1));
}
.t-glass-hover:hover {
  border-color: var(--t-accent, #d896ff);
  background: var(--t-surface-hover, #2a1d40);
  transform: translateY(-2px);
  box-shadow: var(--t-shadow-sm, 0 8px 24px rgba(76,29,149,0.25));
}

/* --- Focus ring (keyboard accessible, overridable per portal) --- */
:focus-visible {
  outline: 3px solid var(--t-accent-bright, #c084fc);
  outline-offset: 3px;
}

/* --- Skip navigation (keyboard-first) --- */
.t-skip {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: .5rem 1rem;
  background: var(--t-accent, #d896ff);
  color: #000;
  font-weight: 700;
  border-radius: 0 0 var(--t-radius-sm, 12px) var(--t-radius-sm, 12px);
  text-decoration: none;
}
.t-skip:focus {
  top: 0;
}

/* --- Orb backgrounds (ambient glow, used by wizard + portal) --- */
.t-orb-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.t-orb-bg::before,
.t-orb-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .3;
  animation: t-float 18s ease-in-out infinite alternate;
}
.t-orb-bg::before {
  top: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--t-accent, #d896ff) 0%, transparent 70%);
}
.t-orb-bg::after {
  bottom: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--t-accent-dim, #9d50e5) 0%, transparent 70%);
  animation-delay: -7s;
}

/* Grid overlay pattern */
.t-grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 150, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 150, 255, .03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ========================================================================
   4. ANIMATIONS
   ======================================================================== */
@keyframes t-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes t-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes t-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes t-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -60px) scale(1.12); }
}

@keyframes t-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}

/* ========================================================================
   5. REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .t-orb-bg::before,
  .t-orb-bg::after {
    animation: none !important;
  }
}

/* ========================================================================
   6. RESPONSIVE BREAKPOINTS (shared)
   ======================================================================== */
@media (max-width: 768px) {
  :root {
    --t-font-size: 17px;
  }
}

@media (max-width: 480px) {
  :root {
    --t-font-size: 16px;
  }
}

/* ========================================================================
   7. PRINT
   ======================================================================== */
@media print {
  .t-pride,
  .t-orb-bg,
  .t-grid-bg {
    display: none !important;
  }
}