/* ============================================================
   EduV Compliance Testlab — Design Token System
   Based on Refactoring UI principles.
   All visual decisions reference these tokens.
   ============================================================ */

:root {
  /* ----- Font Family ----- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ----- Type Scale (hand-crafted, rem) ----- */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* ----- Font Weight ----- */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* ----- Line Height (inversely proportional to size) ----- */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ----- Letter Spacing ----- */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.08em;

  /* ----- Greys (teal-tinted for a cleaner primary-aligned feel) ----- */
  --gray-50:   hsl(186, 28%, 97%);
  --gray-100:  hsl(186, 24%, 93%);
  --gray-200:  hsl(185, 20%, 84%);
  --gray-300:  hsl(185, 16%, 69%);
  --gray-400:  hsl(184, 14%, 57%);
  --gray-500:  hsl(184, 13%, 47%);
  --gray-600:  hsl(184, 14%, 37%);
  --gray-700:  hsl(185, 18%, 27%);
  --gray-800:  hsl(186, 22%, 17%);
  --gray-900:  hsl(188, 28%, 10%);

  /* ----- Primary (teal) ----- */
  --primary-50:  hsl(184, 62%, 96%);
  --primary-100: hsl(184, 56%, 90%);
  --primary-200: hsl(184, 50%, 78%);
  --primary-300: hsl(184, 52%, 64%);
  --primary-400: hsl(184, 64%, 50%);
  --primary-500: hsl(183, 91%, 35%);
  --primary-600: hsl(183, 93%, 30%);
  --primary-700: hsl(183, 95%, 24%);
  --primary-800: hsl(184, 97%, 18%);
  --primary-900: hsl(186, 98%, 12%);

  /* ----- Success (green) ----- */
  --success-50:  hsl(145, 80%, 96%);
  --success-100: hsl(145, 72%, 88%);
  --success-200: hsl(148, 64%, 74%);
  --success-300: hsl(150, 56%, 58%);
  --success-400: hsl(152, 52%, 46%);
  --success-500: hsl(152, 60%, 36%);
  --success-600: hsl(154, 64%, 28%);
  --success-700: hsl(156, 68%, 22%);
  --success-800: hsl(158, 72%, 16%);
  --success-900: hsl(160, 76%, 10%);

  /* ----- Warning (amber) ----- */
  --warning-50:  hsl(45, 100%, 96%);
  --warning-100: hsl(45, 96%, 88%);
  --warning-200: hsl(44, 92%, 76%);
  --warning-300: hsl(42, 88%, 64%);
  --warning-400: hsl(40, 84%, 52%);
  --warning-500: hsl(38, 80%, 44%);
  --warning-600: hsl(36, 76%, 36%);
  --warning-700: hsl(34, 72%, 28%);
  --warning-800: hsl(32, 68%, 20%);
  --warning-900: hsl(30, 64%, 14%);

  /* ----- Danger (red) ----- */
  --danger-50:  hsl(0, 86%, 97%);
  --danger-100: hsl(0, 80%, 92%);
  --danger-200: hsl(0, 72%, 82%);
  --danger-300: hsl(0, 68%, 70%);
  --danger-400: hsl(358, 64%, 58%);
  --danger-500: hsl(356, 62%, 48%);
  --danger-600: hsl(354, 66%, 40%);
  --danger-700: hsl(352, 70%, 32%);
  --danger-800: hsl(350, 74%, 24%);
  --danger-900: hsl(348, 78%, 16%);

  /* ----- Info (cyan) ----- */
  --info-50:  hsl(196, 84%, 96%);
  --info-100: hsl(196, 78%, 88%);
  --info-200: hsl(198, 72%, 78%);
  --info-300: hsl(200, 66%, 64%);
  --info-400: hsl(202, 62%, 52%);
  --info-500: hsl(204, 66%, 42%);
  --info-600: hsl(206, 70%, 34%);
  --info-700: hsl(208, 74%, 26%);
  --info-800: hsl(210, 78%, 18%);
  --info-900: hsl(212, 82%, 12%);

  /* ----- Semantic text colors (three-level hierarchy) ----- */
  --text-primary:   var(--primary-800);
  --text-secondary: var(--gray-500);
  --text-tertiary:  var(--gray-400);
  --text-inverted:  #fff;

  /* ----- Semantic background colors ----- */
  --bg-page:     var(--gray-50);
  --bg-surface:  #fff;
  --bg-muted:    var(--gray-100);
  --bg-inset:    var(--gray-50);
  --bg-sidebar:  var(--gray-900);

  /* ----- Borders ----- */
  --border-default: var(--gray-200);
  --border-subtle:  var(--gray-100);
  --border-strong:  var(--gray-300);

  /* ----- Spacing Scale (geometric, base-16) ----- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1:   0.25rem;    /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2:   0.5rem;     /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* ----- Shadow Elevation System (two-part) ----- */
  --shadow-xs:  0 1px 2px 0 hsl(215 20% 20% / 0.05);
  --shadow-sm:  0 1px 3px 0 hsl(215 20% 20% / 0.1),
                0 1px 2px -1px hsl(215 20% 20% / 0.1);
  --shadow-md:  0 4px 6px -1px hsl(215 20% 20% / 0.1),
                0 2px 4px -2px hsl(215 20% 20% / 0.1);
  --shadow-lg:  0 10px 15px -3px hsl(215 20% 20% / 0.1),
                0 4px 6px -4px hsl(215 20% 20% / 0.1);
  --shadow-xl:  0 20px 25px -5px hsl(215 20% 20% / 0.1),
                0 8px 10px -6px hsl(215 20% 20% / 0.1);

  /* ----- Border Radius ----- */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.375rem;  /* 6px */
  --radius-lg:   0.5rem;    /* 8px */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-full: 9999px;

  /* ----- Transitions ----- */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ----- Content widths ----- */
  --content-max:       72rem;   /* 1152px */
  --content-narrow:    42rem;   /* 672px */
  --content-form:      36rem;   /* 576px */
  --content-text:      65ch;
}