/**
 * brand/tokens.css
 * -----------------
 * CSS custom properties for The Knox Index design system.
 * Imported once in app/+html.tsx so they cascade everywhere on web.
 * React Native components use theme/ TS files for the same values.
 *
 * Edit here to change: colours, spacing, radius, type scale, motion.
 */

:root {
  /* ── Neutral palette ─────────────────────────────────── */
  --color-felt:        #07070B;
  --color-night:       #0E0E14;
  --color-ink:         #14141C;
  --color-stroke:      #26263A;
  --color-stroke-hi:   #3A3A55;
  --color-text:        #ECECF2;
  --color-text-mid:    #A8A8BA;
  --color-text-dim:    #6C6C82;

  /* ── Accent ──────────────────────────────────────────── */
  --color-indigo:      #7C83FF;
  --color-indigo-dim:  rgba(124,131,255,0.12);
  --color-mint:        #3DFFC0;
  --color-amber:       #FFB547;
  --color-rose:        #FF6B8A;

  /* ── Glass surface ───────────────────────────────────── */
  --glass-fill:        rgba(255,255,255,0.03);
  --glass-border:      rgba(255,255,255,0.08);
  --glass-blur:        16px;

  /* ── Party colours ───────────────────────────────────── */
  --party-labour:       #E4002B;
  --party-conservative: #1a5eb8;
  --party-libdem:       #FAA61A;
  --party-snp:          #FFF95D;
  --party-green:        #00C951;
  --party-reform:       #12B6CF;
  --party-plaid:        #005B54;
  --party-dup:          #D46A4C;
  --party-sinnfein:     #326760;
  --party-independent:  #8A8AA5;

  /* ── Spacing scale ───────────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    12px;
  --space-base:  16px;
  --space-lg:    20px;
  --space-xl:    24px;
  --space-xxl:   32px;
  --space-xxxl:  48px;

  /* ── Border radius ───────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Typography ──────────────────────────────────────── */
  --font-family:   'Montserrat', Verdana, sans-serif;
  --font-title:    700;
  --font-body:     400;
  --font-caption:  600;

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --duration-sm:  160ms;
  --duration-md:  280ms;
  --duration-lg:  480ms;

  /* ── Breakpoints (reference only — use via JS) ───────── */
  --bp-mobile:  0px;
  --bp-tablet:  768px;
  --bp-desktop: 1200px;
}

/* ── Global resets for Knox Index web shell ──────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-felt);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Registration wall blur transition ───────────────────── */
.tki-gated {
  position: relative;
  overflow: hidden;
}

.tki-gated-blur {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
  transition: filter var(--duration-md) var(--ease-out);
}

.tki-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 7, 11, 0.65);
  backdrop-filter: blur(2px);
  z-index: 10;
}

/* ── Hover fill sweep on pressables ──────────────────────── */
div[role='button'] {
  position: relative;
  overflow: hidden;
}
div[role='button']::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(255, 255, 255, 0.07);
  transition: width var(--duration-sm) ease-out;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
div[role='button']:hover::before {
  width: 100%;
}

/* ── Draggable card cursor ───────────────────────────────── */
.tki-dragging {
  cursor: grabbing !important;
  opacity: 0.92;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}