/* Orbit Education — design tokens. Single source of truth for every visual value. */

:root {
  /* Brand, sampled from orbit-logo.png */
  --c-crimson:        #A8100E;
  --c-crimson-deep:   #7C0B0A;
  --c-crimson-tint:   #FBECEB;
  --c-crimson-line:   #F0CFCE;

  --c-charcoal:       #3A3A3C;
  --c-ink:            #1A1A1C;
  --c-ink-soft:       #55555A;
  --c-ink-mute:       #7C7C83;

  --c-paper:          #FFFFFF;
  --c-mist:           #F6F4F3;
  --c-mist-deep:      #EDEAE8;
  --c-line:           #E3DFDD;
  --c-line-soft:      #EFECEA;

  --c-ok:             #1F7A4D;
  --c-ok-tint:        #E8F5EE;
  --c-warn:           #9A6400;
  --c-warn-tint:      #FDF3E0;
  --c-err:            #A8100E;
  --c-err-tint:       #FBECEB;

  /* Type */
  --f-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-2xs:  0.6875rem;   /* 11 */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 0.9375rem;   /* 15 */
  --fs-md:   1.0625rem;   /* 17 */
  --fs-lg:   1.25rem;     /* 20 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  1.875rem;    /* 30 */
  --fs-3xl:  2.375rem;    /* 38 */
  --fs-4xl:  3rem;        /* 48 */
  --fs-5xl:  3.75rem;     /* 60 */

  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-base:  1.62;
  --lh-loose: 1.78;

  --tr-tight: -0.022em;
  --tr-base:  0;
  --tr-wide:  0.09em;

  /* Space — 4px base */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --shell:     1200px;
  --shell-narrow: 780px;
  --gutter:    clamp(1.125rem, 4vw, 2.5rem);

  /* Radius */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation */
  --e-1: 0 1px 2px rgba(26, 26, 28, 0.06);
  --e-2: 0 2px 10px rgba(26, 26, 28, 0.07);
  --e-3: 0 12px 34px rgba(26, 26, 28, 0.11);
  --e-brand: 0 10px 26px rgba(168, 16, 14, 0.22);

  /* Motion */
  --t-fast: 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-base: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 460ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layering */
  --z-base: 1;
  --z-sticky: 60;
  --z-nav: 70;
  --z-drawer: 80;
  --z-overlay: 90;
  --z-toast: 100;

  --header-h: 58px;
  --topbar-h: 82px;
  --focus: 2px solid var(--c-crimson);
  --focus-offset: 3px;
}

@media (max-width: 860px) {
  :root {
    --header-h: 64px;
    --topbar-h: 0px;
  }
}