/* Academy Racing League — Spacing, Layout & Shape Tokens */

:root {
  /* ── Base Spacing Scale (4px grid) ── */
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    32px;
  --space-8:    40px;
  --space-9:    48px;
  --space-10:   64px;
  --space-11:   80px;
  --space-12:   96px;
  --space-13:   128px;
  --space-14:   160px;

  /* ── Semantic Spacing ── */
  --gap-xs:     var(--space-1);
  --gap-sm:     var(--space-2);
  --gap-md:     var(--space-4);
  --gap-lg:     var(--space-6);
  --gap-xl:     var(--space-9);

  --padding-xs: var(--space-2);
  --padding-sm: var(--space-3);
  --padding-md: var(--space-4);
  --padding-lg: var(--space-6);
  --padding-xl: var(--space-9);

  /* ── Border Radius ── */
  /* Motorsport aesthetic: sharp with only slight rounding */
  --radius-none:  0px;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-full:  9999px;

  /* ── Clip Paths — Speed / Racing Shapes ── */
  /* Parallelogram cut — the "speed cut" seen in the banner */
  --clip-speed-sm:  polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); /* @kind other */
  --clip-speed-md:  polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%); /* @kind other */
  --clip-speed-lg:  polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%); /* @kind other */
  /* Chevron right (tab-style) */
  --clip-chevron-r: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%); /* @kind other */

  /* ── Borders ── */
  --border-width-thin:   1px;
  --border-width-base:   2px;
  --border-width-thick:  4px;
  --border-width-heavy:  6px;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.65);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.75);

  /* Colored glows — used sparingly for emphasis */
  --glow-blue-sm: 0 0 12px rgba(26, 171, 245, 0.25);
  --glow-blue-md: 0 0 24px rgba(26, 171, 245, 0.35);
  --glow-blue-lg: 0 0 48px rgba(26, 171, 245, 0.4);
  --glow-red-sm:  0 0 12px rgba(227, 28, 36, 0.25);
  --glow-red-md:  0 0 24px rgba(227, 28, 36, 0.35);

  /* ── Z-index Scale ── */
  --z-below:    -1; /* @kind other */
  --z-base:      0; /* @kind other */
  --z-raised:    10; /* @kind other */
  --z-overlay:   100; /* @kind other */
  --z-modal:     200; /* @kind other */
  --z-toast:     300; /* @kind other */
  --z-tooltip:   400; /* @kind other */

  /* ── Layout ── */
  --max-width-content:  1200px;
  --max-width-wide:     1440px;
  --max-width-narrow:   760px;

  /* ── Transitions ── */
  /* Fast and snappy — motorsport, not leisurely */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  --duration-fast:    100ms; /* @kind other */
  --duration-base:    150ms; /* @kind other */
  --duration-slow:    250ms; /* @kind other */
  --duration-enter:   200ms; /* @kind other */
  --duration-exit:    150ms; /* @kind other */

  --transition-base:  all var(--duration-base) var(--ease-standard); /* @kind other */
  --transition-color: color var(--duration-base) var(--ease-standard),
                      background-color var(--duration-base) var(--ease-standard),
                      border-color var(--duration-base) var(--ease-standard); /* @kind other */
}