/**
 * paintballevents.net — design foundations
 *
 * Drop into your global stylesheet. Reference these custom properties in
 * component code; never hardcode hex values, font sizes, spacing, or radius
 * values.
 *
 * Source of truth: see SKILL.md and references/tokens.md in this skill.
 */

:root {
  /* ============================================================
     SURFACES (elevation through lightness, never shadow)
     ============================================================ */
  --bg-base: #0A0A0A;
  --bg-surface: #141414;
  --bg-elevated: #1C1C1C;
  --bg-overlay: #242424;

  /* ============================================================
     BORDERS
     ============================================================ */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* ============================================================
     TEXT
     ============================================================ */
  --text-primary: #D4D4D4;     /* 13.35:1 on bg-base; 12.42:1 on bg-surface */
  --text-secondary: #9A9A9A;   /* ~6:1 on bg-base */
  --text-tertiary: #6B6B6B;    /* decorative-only; below WCAG AA */
  --text-disabled: #454545;

  /* ============================================================
     GREEN — primary action ("go")
     ============================================================ */
  --action-primary-default: #5BD96A;
  --action-primary-hover: #74E168;          /* lighten + 5° yellow shift */
  --action-primary-active: #4BC25A;
  --action-primary-disabled-bg: #1F3A24;
  --action-primary-disabled-fg: #5A6B5E;
  --action-primary-text-on-color: #0A2210;
  --action-primary-bg-subtle: rgba(91, 217, 106, 0.10);
  --action-primary-bg-strong: rgba(91, 217, 106, 0.18);
  --action-primary-border: #5BD96A;
  --action-primary-border-subtle: rgba(91, 217, 106, 0.30);

  /* ============================================================
     AMBER — caution / advisory
     ============================================================ */
  --caution-default: #F2B441;
  --caution-hover: #F5C25C;
  --caution-active: #D69D2E;
  --caution-text-on-color: #2C1F08;
  --caution-bg-subtle: rgba(242, 180, 65, 0.10);
  --caution-border: #F2B441;

  /* ============================================================
     RED — critical / error
     ============================================================ */
  --critical-default: #EF6B6B;
  --critical-hover: #F38080;
  --critical-active: #D85555;
  --critical-text-on-color: #2A0A0A;
  --critical-bg-subtle: rgba(239, 107, 107, 0.10);
  --critical-border: #EF6B6B;

  /* ============================================================
     CYAN — informational / metadata (also: universal focus ring)
     ============================================================ */
  --info-default: #6BCFE8;
  --info-hover: #83D8ED;
  --info-active: #54B8D2;
  --info-text-on-color: #082530;
  --info-bg-subtle: rgba(107, 207, 232, 0.10);
  --info-border: #6BCFE8;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Atkinson Fallback', system-ui, sans-serif;

  /* weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* sizes */
  --text-display: 36px;   /* Orbitron 700, 0.05em — masthead only */
  --text-heading-xl: clamp(32px, 5vw, 48px); /* Atkinson 700, -0.01em — extra-large headings */
  --text-heading-lg: 24px; /* Atkinson 700, -0.01em */
  --text-heading-md: 20px; /* Atkinson 700, -0.01em — event titles, green */
  --text-heading-sm: 16px; /* Atkinson 700 */
  --text-body: 15px;      /* Atkinson 400 */
  --text-meta: 13px;      /* Atkinson 400 */
  --text-label: 11px;     /* Atkinson 400, 0.08em uppercase */

  /* line-heights */
  --leading-tight: 1.2;   /* display, heading-xl, heading-lg, heading-md */
  --leading-snug: 1.3;    /* heading-sm */
  --leading-relaxed: 1.55;/* body */
  --leading-normal: 1.4;  /* meta, label */

  /* letter-spacing */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-label: 0.08em;

  /* ============================================================
     SPACING — 8px base
     ============================================================ */

  /* component scale */
  --space-1x: 8px;
  --space-2x: 16px;
  --space-3x: 24px;
  --space-4x: 32px;
  --space-5x: 40px;

  /* layout scale */
  --space-6x: 48px;
  --space-8x: 64px;
  --space-12x: 96px;
  --space-16x: 128px;

  /* half-step exceptions — component-internal inline ONLY */
  --space-half: 4px;
  --space-1-5x: 12px;

  /* ============================================================
     BORDER-RADIUS — sharp scale, max 8px
     ============================================================ */
  --radius-none: 0;
  --radius-xs: 2px;        /* tags, badges */
  --radius-sm: 4px;        /* buttons, inputs */
  --radius-md: 6px;        /* default cards */
  --radius-lg: 8px;        /* modals, hero cards */

  /* ============================================================
     UNIVERSAL FOCUS RING
     Apply this to every interactive element.
     This is the only place cyan touches an actionable element.
     ============================================================ */
  --focus-ring: 2px solid var(--info-default);
  --focus-ring-offset: 2px;
}

/* ============================================================
   BASE — applies these to body and reset
   ============================================================ */
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  font-weight: 400;
}

/* universal focus ring — keyboard navigation only (see includes/focus_modality.php) */
:focus,
:focus-visible {
  outline: none;
}

html[data-input-modality="keyboard"] :focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

html[data-input-modality="pointer"] :focus,
html[data-input-modality="pointer"] :focus-visible {
  outline: none !important;
}

/* utility primitive for screen-reader-only content */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* event titles — green by default */
.event-title,
[data-role="event-title"] {
  color: var(--action-primary-default);
  font-size: var(--text-heading-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

/* uppercase system labels */
.label,
[data-role="label"] {
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--leading-normal);
}