/* Velocity Blue Design System for Brebes Beres Run 2026 */
/* Root variables */
:root {
  /* Colors */
  --surface: #f9f9ff;
  --surface-dim: #d7d9e5;
  --surface-bright: #f9f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f3fe;
  --surface-container: #ebedf9;
  --surface-container-high: #e6e8f3;
  --surface-container-highest: #e0e2ed;
  --on-surface: #181c23;
  --on-surface-variant: #414754;
  --inverse-surface: #2d3039;
  --inverse-on-surface: #eef0fb;
  --outline: #717786;
  --outline-variant: #c1c6d7;
  --surface-tint: #005bc0;
  --primary: #0059bb;
  --on-primary: #ffffff;
  --primary-container: #0070ea;
  --on-primary-container: #fefcff;
  --inverse-primary: #adc7ff;
  --secondary: #00677e;
  --on-secondary: #ffffff;
  --secondary-container: #00d2fd;
  --on-secondary-container: #005669;
  --tertiary: #9e3d00;
  --on-tertiary: #ffffff;
  --tertiary-container: #c64f00;
  --on-tertiary-container: #fffbff;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --primary-fixed: #d8e2ff;
  --primary-fixed-dim: #adc7ff;
  --on-primary-fixed: #001a41;
  --on-primary-fixed-variant: #004493;
  --secondary-fixed: #b4ebff;
  --secondary-fixed-dim: #3cd7ff;
  --on-secondary-fixed: #001f27;
  --on-secondary-fixed-variant: #004e5f;
  --tertiary-fixed: #ffdbcc;
  --tertiary-fixed-dim: #ffb695;
  --on-tertiary-fixed: #351000;
  --on-tertiary-fixed-variant: #7c2e00;
  --background: #f9f9ff;
  --on-background: #181c23;
  --surface-variant: #e0e2ed;
  --electric-cyan: #5BF1FF;
  --deep-finish: #004A99;
  --energy-white: #FFFFFF;
  --neutral-track: #121A21;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-label: 'JetBrains Mono', monospace;

  /* Rounded */
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-full: 9999px;

  /* Spacing */
  --spacing-unit: 4px;
  --gutter-sm: 16px;
  --gutter-md: 24px;
  --margin-mobile: 16px;
  --margin-desktop: 64px;
}

/* Utility classes */

/* Colors */
.bg-primary { background-color: var(--primary) !important; }
.bg-primary-container { background-color: var(--primary-container) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-secondary-container { background-color: var(--secondary-container) !important; }
.bg-tertiary { background-color: var(--tertiary) !important; }
.bg-tertiary-container { background-color: var(--tertiary-container) !important; }
.bg-error { background-color: var(--error) !important; }
.bg-error-container { background-color: var(--error-container) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-dim { background-color: var(--surface-dim) !important; }
.bg-surface-bright { background-color: var(--surface-bright) !important; }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-surface-container { background-color: var(--surface-container) !important; }
.bg-surface-container-high { background-color: var(--surface-container-high) !important; }
.bg-surface-container-highest { background-color: var(--surface-container-highest) !important; }
.bg-inverse-surface { background-color: var(--inverse-surface) !important; }
.bg-outline { background-color: var(--outline) !important; }
.bg-outline-variant { background-color: var(--outline-variant) !important; }
.bg-surface-tint { background-color: var(--surface-tint) !important; }
.bg-electric-cyan { background-color: var(--electric-cyan) !important; }
.bg-deep-finish { background-color: var(--deep-finish) !important; }
.bg-energy-white { background-color: var(--energy-white) !important; }
.bg-neutral-track { background-color: var(--neutral-track) !important; }

.text-primary { color: var(--primary) !important; }
.text-on-primary { color: var(--on-primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-on-secondary { color: var(--on-secondary) !important; }
.text-tertiary { color: var(--tertiary) !important; }
.text-on-tertiary { color: var(--on-tertiary) !important; }
.text-error { color: var(--error) !important; }
.text-on-error { color: var(--on-error) !important; }
.text-surface { color: var(--surface) !important; }
.text-on-surface { color: var(--on-surface) !important; }
.text-on-surface-variant { color: var(--on-surface-variant) !important; }
.text-inverse-surface { color: var(--inverse-surface) !important; }
.text-inverse-on-surface { color: var(--inverse-on-surface) !important; }
.text-outline { color: var(--outline) !important; }
.text-outline-variant { color: var(--outline-variant) !important; }
.text-surface-tint { color: var(--surface-tint) !important; }
.text-electric-cyan { color: var(--electric-cyan) !important; }
.text-deep-finish { color: var(--deep-finish) !important; }
.text-energy-white { color: var(--energy-white) !important; }
.text-neutral-track { color: var(--neutral-track) !important; }

/* Rounded */
.rounded-sm { border-radius: var(--rounded-sm) !important; }
.rounded { border-radius: var(--rounded) !important; }
.rounded-md { border-radius: var(--rounded-md) !important; }
.rounded-lg { border-radius: var(--rounded-lg) !important; }
.rounded-xl { border-radius: var(--rounded-xl) !important; }
.rounded-full { border-radius: var(--rounded-full) !important; }

/* Typography */
.font-display { font-family: var(--font-display) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-label { font-family: var(--font-label) !important; }

/* Spacing - margin */
.m-0 { margin: 0 !important; }
.m-1 { margin: calc(var(--spacing-unit) * 1) !important; }
.m-2 { margin: calc(var(--spacing-unit) * 2) !important; }
.m-3 { margin: calc(var(--spacing-unit) * 3) !important; }
.m-4 { margin: calc(var(--spacing-unit) * 4) !important; }
.m-5 { margin: calc(var(--spacing-unit) * 5) !important; }
.m-6 { margin: calc(var(--spacing-unit) * 6) !important; }
.m-8 { margin: calc(var(--spacing-unit) * 8) !important; }
.m-10 { margin: calc(var(--spacing-unit) * 10) !important; }
.m-12 { margin: calc(var(--spacing-unit) * 12) !important; }
.m-16 { margin: calc(var(--spacing-unit) * 16) !important; }
.m-20 { margin: calc(var(--spacing-unit) * 20) !important; }
.m-24 { margin: calc(var(--spacing-unit) * 24) !important; }
.m-32 { margin: calc(var(--spacing-unit) * 32) !important; }
.m-40 { margin: calc(var(--spacing-unit) * 40) !important; }
.m-48 { margin: calc(var(--spacing-unit) * 48) !important; }
.m-56 { margin: calc(var(--spacing-unit) * 56) !important; }
.m-64 { margin: calc(var(--spacing-unit) * 64) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: calc(var(--spacing-unit) * 1) !important; }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2) !important; }
.mt-3 { margin-top: calc(var(--spacing-unit) * 3) !important; }
.mt-4 { margin-top: calc(var(--spacing-unit) * 4) !important; }
.mt-5 { margin-top: calc(var(--spacing-unit) * 5) !important; }
.mt-6 { margin-top: calc(var(--spacing-unit) * 6) !important; }
.mt-8 { margin-top: calc(var(--spacing-unit) * 8) !important; }
.mt-10 { margin-top: calc(var(--spacing-unit) * 10) !important; }
.mt-12 { margin-top: calc(var(--spacing-unit) * 12) !important; }
.mt-16 { margin-top: calc(var(--spacing-unit) * 16) !important; }
.mt-20 { margin-top: calc(var(--spacing-unit) * 20) !important; }
.mt-24 { margin-top: calc(var(--spacing-unit) * 24) !important; }
.mt-32 { margin-top: calc(var(--spacing-unit) * 32) !important; }
.mt-40 { margin-top: calc(var(--spacing-unit) * 40) !important; }
.mt-48 { margin-top: calc(var(--spacing-unit) * 48) !important; }
.mt-56 { margin-top: calc(var(--spacing-unit) * 56) !important; }
.mt-64 { margin-top: calc(var(--spacing-unit) * 64) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: calc(var(--spacing-unit) * 1) !important; }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2) !important; }
.mb-3 { margin-bottom: calc(var(--spacing-unit) * 3) !important; }
.mb-4 { margin-bottom: calc(var(--spacing-unit) * 4) !important; }
.mb-5 { margin-bottom: calc(var(--spacing-unit) * 5) !important; }
.mb-6 { margin-bottom: calc(var(--spacing-unit) * 6) !important; }
.mb-8 { margin-bottom: calc(var(--spacing-unit) * 8) !important; }
.mb-10 { margin-bottom: calc(var(--spacing-unit) * 10) !important; }
.mb-12 { margin-bottom: calc(var(--spacing-unit) * 12) !important; }
.mb-16 { margin-bottom: calc(var(--spacing-unit) * 16) !important; }
.mb-20 { margin-bottom: calc(var(--spacing-unit) * 20) !important; }
.mb-24 { margin-bottom: calc(var(--spacing-unit) * 24) !important; }
.mb-32 { margin-bottom: calc(var(--spacing-unit) * 32) !important; }
.mb-40 { margin-bottom: calc(var(--spacing-unit) * 40) !important; }
.mb-48 { margin-bottom: calc(var(--spacing-unit) * 48) !important; }
.mb-56 { margin-bottom: calc(var(--spacing-unit) * 56) !important; }
.mb-64 { margin-bottom: calc(var(--spacing-unit) * 64) !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: calc(var(--spacing-unit) * 1) !important; }
.ms-2 { margin-left: calc(var(--spacing-unit) * 2) !important; }
.ms-3 { margin-left: calc(var(--spacing-unit) * 3) !important; }
.ms-4 { margin-left: calc(var(--spacing-unit) * 4) !important; }
.ms-5 { margin-left: calc(var(--spacing-unit) * 5) !important; }
.ms-6 { margin-left: calc(var(--spacing-unit) * 6) !important; }
.ms-8 { margin-left: calc(var(--spacing-unit) * 8) !important; }
.ms-10 { margin-left: calc(var(--spacing-unit) * 10) !important; }
.ms-12 { margin-left: calc(var(--spacing-unit) * 12) !important; }
.ms-16 { margin-left: calc(var(--spacing-unit) * 16) !important; }
.ms-20 { margin-left: calc(var(--spacing-unit) * 20) !important; }
.ms-24 { margin-left: calc(var(--spacing-unit) * 24) !important; }
.ms-32 { margin-left: calc(var(--spacing-unit) * 32) !important; }
.ms-40 { margin-left: calc(var(--spacing-unit) * 40) !important; }
.ms-48 { margin-left: calc(var(--spacing-unit) * 48) !important; }
.ms-56 { margin-left: calc(var(--spacing-unit) * 56) !important; }
.ms-64 { margin-left: calc(var(--spacing-unit) * 64) !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: calc(var(--spacing-unit) * 1) !important; }
.me-2 { margin-right: calc(var(--spacing-unit) * 2) !important; }
.me-3 { margin-right: calc(var(--spacing-unit) * 3) !important; }
.me-4 { margin-right: calc(var(--spacing-unit) * 4) !important; }
.me-5 { margin-right: calc(var(--spacing-unit) * 5) !important; }
.me-6 { margin-right: calc(var(--spacing-unit) * 6) !important; }
.me-8 { margin-right: calc(var(--spacing-unit) * 8) !important; }
.me-10 { margin-right: calc(var(--spacing-unit) * 10) !important; }
.me-12 { margin-right: calc(var(--spacing-unit) * 12) !important; }
.me-16 { margin-right: calc(var(--spacing-unit) * 16) !important; }
.me-20 { margin-right: calc(var(--spacing-unit) * 20) !important; }
.me-24 { margin-right: calc(var(--spacing-unit) * 24) !important; }
.me-32 { margin-right: calc(var(--spacing-unit) * 32) !important; }
.me-40 { margin-right: calc(var(--spacing-unit) * 40) !important; }
.me-48 { margin-right: calc(var(--spacing-unit) * 48) !important; }
.me-56 { margin-right: calc(var(--spacing-unit) * 56) !important; }
.me-64 { margin-right: calc(var(--spacing-unit) * 64) !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: calc(var(--spacing-unit) * 1) !important; }
.p-2 { padding: calc(var(--spacing-unit) * 2) !important; }
.p-3 { padding: calc(var(--spacing-unit) * 3) !important; }
.p-4 { padding: calc(var(--spacing-unit) * 4) !important; }
.p-5 { padding: calc(var(--spacing-unit) * 5) !important; }
.p-6 { padding: calc(var(--spacing-unit) * 6) !important; }
.p-8 { padding: calc(var(--spacing-unit) * 8) !important; }
.p-10 { padding: calc(var(--spacing-unit) * 10) !important; }
.p-12 { padding: calc(var(--spacing-unit) * 12) !important; }
.p-16 { padding: calc(var(--spacing-unit) * 16) !important; }
.p-20 { padding: calc(var(--spacing-unit) * 20) !important; }
.p-24 { padding: calc(var(--spacing-unit) * 24) !important; }
.p-32 { padding: calc(var(--spacing-unit) * 32) !important; }
.p-40 { padding: calc(var(--spacing-unit) * 40) !important; }
.p-48 { padding: calc(var(--spacing-unit) * 48) !important; }
.p-56 { padding: calc(var(--spacing-unit) * 56) !important; }
.p-64 { padding: calc(var(--spacing-unit) * 64) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: calc(var(--spacing-unit) * 1) !important; }
.pt-2 { padding-top: calc(var(--spacing-unit) * 2) !important; }
.pt-3 { padding-top: calc(var(--spacing-unit) * 3) !important; }
.pt-4 { padding-top: calc(var(--spacing-unit) * 4) !important; }
.pt-5 { padding-top: calc(var(--spacing-unit) * 5) !important; }
.pt-6 { padding-top: calc(var(--spacing-unit) * 6) !important; }
.pt-8 { padding-top: calc(var(--spacing-unit) * 8) !important; }
.pt-10 { padding-top: calc(var(--spacing-unit) * 10) !important; }
.pt-12 { padding-top: calc(var(--spacing-unit) * 12) !important; }
.pt-16 { padding-top: calc(var(--spacing-unit) * 16) !important; }
.pt-20 { padding-top: calc(var(--spacing-unit) * 20) !important; }
.pt-24 { padding-top: calc(var(--spacing-unit) * 24) !important; }
.pt-32 { padding-top: calc(var(--spacing-unit) * 32) !important; }
.pt-40 { padding-top: calc(var(--spacing-unit) * 40) !important; }
.pt-48 { padding-top: calc(var(--spacing-unit) * 48) !important; }
.pt-56 { padding-top: calc(var(--spacing-unit) * 56) !important; }
.pt-64 { padding-top: calc(var(--spacing-unit) * 64) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: calc(var(--spacing-unit) * 1) !important; }
.pb-2 { padding-bottom: calc(var(--spacing-unit) * 2) !important; }
.pb-3 { padding-bottom: calc(var(--spacing-unit) * 3) !important; }
.pb-4 { padding-bottom: calc(var(--spacing-unit) * 4) !important; }
.pb-5 { padding-bottom: calc(var(--spacing-unit) * 5) !important; }
.pb-6 { padding-bottom: calc(var(--spacing-unit) * 6) !important; }
.pb-8 { padding-bottom: calc(var(--spacing-unit) * 8) !important; }
.pb-10 { padding-bottom: calc(var(--spacing-unit) * 10) !important; }
.pb-12 { padding-bottom: calc(var(--spacing-unit) * 12) !important; }
.pb-16 { padding-bottom: calc(var(--spacing-unit) * 16) !important; }
.pb-20 { padding-bottom: calc(var(--spacing-unit) * 20) !important; }
.pb-24 { padding-bottom: calc(var(--spacing-unit) * 24) !important; }
.pb-32 { padding-bottom: calc(var(--spacing-unit) * 32) !important; }
.pb-40 { padding-bottom: calc(var(--spacing-unit) * 40) !important; }
.pb-48 { padding-bottom: calc(var(--spacing-unit) * 48) !important; }
.pb-56 { padding-bottom: calc(var(--spacing-unit) * 56) !important; }
.pb-64 { padding-bottom: calc(var(--spacing-unit) * 64) !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: calc(var(--spacing-unit) * 1) !important; }
.ps-2 { padding-left: calc(var(--spacing-unit) * 2) !important; }
.ps-3 { padding-left: calc(var(--spacing-unit) * 3) !important; }
.ps-4 { padding-left: calc(var(--spacing-unit) * 4) !important; }
.ps-5 { padding-left: calc(var(--spacing-unit) * 5) !important; }
.ps-6 { padding-left: calc(var(--spacing-unit) * 6) !important; }
.ps-8 { padding-left: calc(var(--spacing-unit) * 8) !important; }
.ps-10 { padding-left: calc(var(--spacing-unit) * 10) !important; }
.ps-12 { padding-left: calc(var(--spacing-unit) * 12) !important; }
.ps-16 { padding-left: calc(var(--spacing-unit) * 16) !important; }
.ps-20 { padding-left: calc(var(--spacing-unit) * 20) !important; }
.ps-24 { padding-left: calc(var(--spacing-unit) * 24) !important; }
.ps-32 { padding-left: calc(var(--spacing-unit) * 32) !important; }
.ps-40 { padding-left: calc(var(--spacing-unit) * 40) !important; }
.ps-48 { padding-left: calc(var(--spacing-unit) * 48) !important; }
.ps-56 { padding-left: calc(var(--spacing-unit) * 56) !important; }
.ps-64 { padding-left: calc(var(--spacing-unit) * 64) !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: calc(var(--spacing-unit) * 1) !important; }
.pe-2 { padding-right: calc(var(--spacing-unit) * 2) !important; }
.pe-3 { padding-right: calc(var(--spacing-unit) * 3) !important; }
.pe-4 { padding-right: calc(var(--spacing-unit) * 4) !important; }
.pe-5 { padding-right: calc(var(--spacing-unit) * 5) !important; }
.pe-6 { padding-right: calc(var(--spacing-unit) * 6) !important; }
.pe-8 { padding-right: calc(var(--spacing-unit) * 8) !important; }
.pe-10 { padding-right: calc(var(--spacing-unit) * 10) !important; }
.pe-12 { padding-right: calc(var(--spacing-unit) * 12) !important; }
.pe-16 { padding-right: calc(var(--spacing-unit) * 16) !important; }
.pe-20 { padding-right: calc(var(--spacing-unit) * 20) !important; }
.pe-24 { padding-right: calc(var(--spacing-unit) * 24) !important; }
.pe-32 { padding-right: calc(var(--spacing-unit) * 32) !important; }
.pe-40 { padding-right: calc(var(--spacing-unit) * 40) !important; }
.pe-48 { padding-right: calc(var(--spacing-unit) * 48) !important; }
.pe-56 { padding-right: calc(var(--spacing-unit) * 56) !important; }
.pe-64 { padding-right: calc(var(--spacing-unit) * 64) !important; }

/* Display */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.hidden { display: none !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Font weight */
.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-semibold { font-weight: 600 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-extrabold { font-weight: 800 !important; }
.font-weight-black { font-weight: 900 !important; }

/* Font size (using rem based on 16px base) */
.text-xs { font-size: 0.75rem !important; } /* 12px */
.text-sm { font-size: 0.875rem !important; } /* 14px */
.text-base { font-size: 1rem !important; } /* 16px */
.text-lg { font-size: 1.125rem !important; } /* 18px */
.text-xl { font-size: 1.25rem !important; } /* 20px */
.text-2xl { font-size: 1.5rem !important; } /* 24px */
.text-3xl { font-size: 1.875rem !important; } /* 30px */
.text-4xl { font-size: 2.25rem !important; } /* 36px */
.text-5xl { font-size: 3rem !important; } /* 48px */
.text-6xl { font-size: 3.75rem !important; } /* 60px */

/* Leading (line height) */
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose { line-height: 2 !important; }

/* Tracking (letter spacing) */
.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-5 { opacity: 0.05 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-95 { opacity: 0.95 !important; }
.opacity-100 { opacity: 1 !important; }

/* Shadow (using deep-finish for shadow color) */
.shadow-sm { box-shadow: 0 1px 2px 0 var(--deep-finish) !important; }
.shadow { box-shadow: 0 1px 3px 0 var(--deep-finish), 0 1px 2px -1px var(--deep-finish) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px var(--deep-finish), 0 2px 4px -2px var(--deep-finish) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px var(--deep-finish), 0 4px 6px -4px var(--deep-finish) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px var(--deep-finish), 0 8px 10px -6px var(--deep-finish) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px var(--deep-finish) !important; }
.shadow-inner { box-shadow: inset 0 2px 4px 0 var(--deep-finish) !important; }