/**
 * 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-wall-mid: #3C93AB;          /* mid step of extruded button side wall */
  --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 */

  /* ============================================================
     EXTRUDED CONTROLS — intentional shadow exception (raised-slab buttons)
     ============================================================ */
  --extrude-face-highlight: rgba(255, 255, 255, 0.35);   /* top-edge catch light on button face */
  --extrude-face-shadow: rgba(0, 0, 0, 0.12);            /* bottom inner shadow on button face */
  --extrude-ground-shadow: rgba(0, 0, 0, 0.45);          /* ambient elevation beneath control */
  --extrude-face-highlight-pressed: rgba(255, 255, 255, 0.25);
  --extrude-ground-shadow-pressed: rgba(0, 0, 0, 0.40);  /* residual ground shadow when pressed */
  /* feTurbulence face grain — tile 40 / baseFrequency 2 / opacity 0.42 (tuned in extruded_button.html) */
  --extrude-face-noise: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22turbulence%22%20baseFrequency%3D%222%22%20numOctaves%3D%221%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.42%22%2F%3E%3C%2Fsvg%3E");

  /* ============================================================
     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-color: var(--bg-base);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22turbulence%22%20baseFrequency%3D%220.6%22%20numOctaves%3D%221%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.19%22%2F%3E%3C%2Fsvg%3E");
  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);
}

/*
  Extruded CTA — color variants + optional sharp corners.
  From docs/design-system/components/extruded_button.html.
  Intentional box-shadow extrusion wall; site otherwise elevates via lightness only.
*/
.btn-extruded {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1x);
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-normal);
  color: var(--btn-text-on);
  background-color: var(--btn-face);
  background-image: var(--extrude-face-noise);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 var(--extrude-face-highlight),
    inset 0 -2px 3px var(--extrude-face-shadow),
    0 1px 0 color-mix(in srgb, var(--btn-wall-top) 60%, black),
    0 2px 0 color-mix(in srgb, var(--btn-wall-top) 82.6%, black),
    0 3px 0 color-mix(in srgb, var(--btn-wall-top) 77.4%, black),
    0 4px 0 color-mix(in srgb, var(--btn-wall-top) 68.8%, black),
    0 5px 0 color-mix(in srgb, var(--btn-wall-top) 56.8%, black),
    0 6px 0 color-mix(in srgb, var(--btn-wall-top) 41.3%, black),
    0 10px 8px -4px var(--extrude-ground-shadow);
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}

.btn-extruded.is-pressed,
.btn-extruded:active {
  transform: translateY(6px);
  box-shadow:
    inset 0 1px 0 var(--extrude-face-highlight-pressed),
    inset 0 -2px 3px var(--extrude-face-shadow),
    0 1px 0 color-mix(in srgb, var(--btn-wall-top) 60%, black),
    0 1px 0 color-mix(in srgb, var(--btn-wall-top) 82.6%, black),
    0 1px 0 color-mix(in srgb, var(--btn-wall-top) 77.4%, black),
    0 1px 0 color-mix(in srgb, var(--btn-wall-top) 68.8%, black),
    0 1px 0 color-mix(in srgb, var(--btn-wall-top) 56.8%, black),
    0 1px 0 color-mix(in srgb, var(--btn-wall-top) 41.3%, black),
    0 4px 5px -2px var(--extrude-ground-shadow-pressed);
}

@media (prefers-reduced-motion: reduce) {
  .btn-extruded {
    transition: none;
  }
}

.btn-extruded--green {
  --btn-face: var(--action-primary-default);
  --btn-text-on: var(--action-primary-text-on-color);
  --btn-wall-top: var(--action-primary-active);
}

/* Extruded CTA: darken face on hover (active token) instead of the usual primary lighten. */
.btn-extruded--green:hover {
  --btn-face: var(--action-primary-active);
}

.btn-extruded--cyan {
  --btn-face: var(--info-default);
  --btn-text-on: var(--info-text-on-color);
  --btn-wall-top: var(--info-active);
}

.btn-extruded--cyan:hover {
  --btn-face: var(--info-active);
}

.btn-extruded--amber {
  --btn-face: var(--caution-default);
  --btn-text-on: var(--caution-text-on-color);
  --btn-wall-top: var(--caution-active);
}

.btn-extruded--amber:hover {
  --btn-face: var(--caution-active);
}

.btn-extruded--critical {
  --btn-face: var(--critical-default);
  --btn-text-on: var(--critical-text-on-color);
  --btn-wall-top: var(--critical-active);
}

.btn-extruded--critical:hover {
  --btn-face: var(--critical-active);
}

.btn-extruded--text-primary {
  --btn-face: var(--text-primary);
  --btn-text-on: var(--bg-base);
  --btn-wall-top: var(--text-secondary);
}

.btn-extruded--text-primary:hover {
  --btn-face: var(--text-secondary);
}

.btn-extruded--sharp {
  border-radius: var(--radius-none);
}

.btn-extruded .button-dither__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1x);
}

.btn-extruded .btn-icon {
  display: block;
  width: var(--text-heading-md);
  height: var(--text-heading-md);
  flex-shrink: 0;
}