/* ==========================================================================
   CSS Variables — Global Design Tokens
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --color-primary:        #F05223;
  --color-primary-vivid:  #FD4711;
  --color-primary-dark:   #C53B11;

  --color-neutral:        #758188;
  --color-dark:           #071C24;
  --color-dark-mid:       #1F2A30;
  --color-dark-soft:      #222E35;
  --color-light:          #E7EEF1;

  /* ── Semantic Colors ── */
  --color-text:           #071C24;
  --color-text-muted:     #758188;
  --color-text-inverse:   #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #E7EEF1;
  --color-bg-dark:        #071C24;
  --color-border:         #dce3e7;

  /* ── Typography ── */
  --font-family:          'Space Grotesk', sans-serif;
  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.8125rem; /* 13px */
  --font-size-base:       0.9375rem; /* 15px */
  --font-size-md:         1rem;      /* 16px */
  --font-size-lg:         1.25rem;   /* 20px */
  --font-size-xl:         1.5rem;    /* 24px */
  --font-size-2xl:        2rem;      /* 32px */
  --font-size-3xl:        2.5rem;    /* 40px */
  --font-size-4xl:        3rem;      /* 48px */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-base:     1.6;
  --line-height-loose:    1.8;

  /* ── Spacing ── */
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.5rem;    /* 8px  */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */

  /* ── Layout ── */
  --container-width:      1440px;
  --container-desktop:    80%;
  --container-narrow:     960px;
  --container-wide:       1600px;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(7, 28, 36, 0.06);
  --shadow-md:   0 4px 12px rgba(7, 28, 36, 0.08);
  --shadow-lg:   0 8px 24px rgba(7, 28, 36, 0.12);
  --shadow-xl:   0 16px 48px rgba(7, 28, 36, 0.16);

  /* ── Transitions ── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
}