/* ==========================================================================
   Design Tokens — MBA ACT
   Source: figma/09-style-guide.md + Figma MCP (shadows)
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Colors — Brand
     -------------------------------------------------------------------------- */
  --color-white: #ffffff;
  --color-tangerine: #ff6600;
  --color-navy: #0b1628;

  /* --------------------------------------------------------------------------
     Colors — Neutral Scale
     -------------------------------------------------------------------------- */
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #dadad8;
  --color-neutral-light: #b6b5b2;
  --color-neutral: #86857f;
  --color-neutral-dark: #55544c;
  --color-neutral-darker: #252319;
  --color-neutral-darkest: #0d0b00;

  /* --------------------------------------------------------------------------
     Colors — Tangerine Scale
     -------------------------------------------------------------------------- */
  --color-tangerine-lightest: #ffefe5;
  --color-tangerine-lighter: #ffe0cc;
  --color-tangerine-light: #ff934c;
  /* --color-tangerine already defined above as brand color */
  --color-tangerine-dark: #cc5100;
  --color-tangerine-darker: #662800;
  --color-tangerine-darkest: #4c1e00;

  /* --------------------------------------------------------------------------
     Colors — Navy Scale
     -------------------------------------------------------------------------- */
  --color-navy-lightest: #e6e7e9;
  --color-navy-lighter: #ced0d4;
  --color-navy-light: #545b68;
  /* --color-navy already defined above as brand color */
  --color-navy-dark: #081120;
  --color-navy-darker: #040810;
  --color-navy-darkest: #03060c;

  /* --------------------------------------------------------------------------
     Colors — Accent
     -------------------------------------------------------------------------- */
  --color-accent-soft-green: #81b9a2;
  --color-accent-light-orange: #ffad77;
  --color-accent-light-blue: #cbdae6;
  --color-accent-silver: #ebebeb;

  /* --------------------------------------------------------------------------
     Colors — Opacity (White)
     -------------------------------------------------------------------------- */
  --color-white-transparent: rgba(255, 255, 255, 0);
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-60: rgba(255, 255, 255, 0.6);

  /* --------------------------------------------------------------------------
     Colors — Opacity (Neutral Darkest)
     -------------------------------------------------------------------------- */
  --color-dark-5: rgba(13, 11, 0, 0.05);
  --color-dark-10: rgba(13, 11, 0, 0.1);
  --color-dark-15: rgba(13, 11, 0, 0.15);
  --color-dark-20: rgba(13, 11, 0, 0.2);
  --color-dark-30: rgba(13, 11, 0, 0.3);
  --color-dark-40: rgba(13, 11, 0, 0.4);
  --color-dark-50: rgba(13, 11, 0, 0.5);
  --color-dark-60: rgba(13, 11, 0, 0.6);

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-xxs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 3px 16px -4px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0px 8px 8px -4px rgba(0, 0, 0, 0.03), 0px 20px 24px -4px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
  --shadow-xxl: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);

  /* --------------------------------------------------------------------------
     Spacing (8px base grid)
     -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;    /* Figma "Courses Wrapper" padding, "Popular section" padding */
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;  /* Figma section vertical padding */
  --space-32: 128px;
  --space-36: 143px;  /* Figma Content Card Block gap */

  /* --------------------------------------------------------------------------
     Breakpoints (for reference — use in @media queries directly)
     Desktop: 1440px | Tablet: 768px | Mobile: 402px
     -------------------------------------------------------------------------- */

  /* --------------------------------------------------------------------------
     Semantic Aliases — Color Schemes
     Overridden by .scheme-* classes in schemes.css
     -------------------------------------------------------------------------- */
  --text: var(--color-navy-darkest);
  --bg: var(--color-white);
  --border: var(--color-navy);
  --accent: var(--color-tangerine);
}