/* ── Design Tokens ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:        #E8005A;
  --color-primary-hover:  #c4004d;
  --color-primary-light:  #ff4488;

  --color-secondary:      #F7C600;

  --color-accent:         #c01557;

  /* Neutrals — dark theme */
  --color-bg:             #0A0C17;
  --color-surface:        #0A111E;
  --color-surface-raised: linear-gradient(0deg, #1a2235 0%, #0c1526 100%);
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-border-subtle:  rgba(255, 255, 255, 0.07);
  --color-border-focus:   #3b82f6;
  --color-border-line:    currentColor;
  --line-thickness:       2px;

  --color-text:           #ffffff;
  --color-text-muted:     rgb(255, 255, 255, .75);
  --color-text-subtle:    rgb(255, 255, 255, .50);
  --color-text-inverse:   #0b0f1a;

  /* Layout */
  --navbar-height:        60px;

  /* Sidebar */
  --sidebar-bg:           #0b0f1a;
  --sidebar-text:         #64748b;
  --sidebar-active-bg:    #1e3a5f;
  --sidebar-active-text:  #60a5fa;
  --sidebar-width:        240px;

  /* Typography */
  --font-primary:   "Big Shoulders", sans-serif;  /* headings, body, nav */
  --font-secondary: "Barlow Condensed", sans-serif;              /* tables, inputs, numbers */
  --font-accent: "Eater", serif;

  --text-3xs:  0.5rem;
  --text-2xs:   0.625rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-xbold:    800;
  --font-black:    900;

  /* Spacing */
  --space-1:     0.25rem;
  --space-2:     0.5rem;
  --space-2-5:   0.625rem;
  --space-3:     0.75rem;
  --space-4:     1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Shape */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadow — elevated on dark */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40);
  --shadow:    0 2px 6px 0 rgb(0 0 0 / 0.50);
  --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.55);
  --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.65);

  /* Transitions */
  --transition: 150ms ease;
  --transition-md: 250ms ease;

  /* Animations */
  --animation-duration: 1200ms;
    --animation-duration-fast: 800ms;
    --animation-duration-slow: 1600ms;
    --animation-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --animation-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-distance: 60px;
    --animation-distance-small: 30px;

  /* Navbar Height */
  --navbar-mobile:            84px;
  --navbar-tablet:            110px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    scroll-behavior: smooth;
}

body {
    background: var(--color-primary);
    color: var(--color-text);
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

main, section, article, aside, header, footer, nav {
    margin: 0;
    padding: 0;
}

.page-wrapper {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

a {
    font-family: var(--font-secondary);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}