/* ================================================================
   LEAST LMS — Design Tokens
   All CSS custom properties live here.
   Components reference these variables exclusively.
   Override via [data-theme="..."] — see themes/ folder.
   ================================================================ */

:root {

  /* ── Colors ──────────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:              #ffffff;
  --color-bg-subtle:       #f8f9fa;
  --color-bg-muted:        #f1f3f5;
  --color-surface:         #ffffff;

  /* Borders */
  --color-border:          #e9ecef;
  --color-border-strong:   #ced4da;
  --color-border-input:    #767676;   /* ~4.5:1 on white — AA; form input boundaries (SC 1.4.11) */

  /* Text */
  --color-text:            #212529;   /* ~15.1:1 on white — AAA */
  --color-text-muted:      #6c757d;   /* ~4.64:1 on white — AA */
  --color-text-subtle:     #adb5bd;   /* placeholder / disabled only */
  --color-text-inverse:    #ffffff;

  /* Accent (interactive) */
  --color-accent:          #2563eb;   /* 5.9:1 on white — AA */
  --color-accent-hover:    #1d4ed8;
  --color-accent-active:   #1e40af;
  --color-accent-subtle:   #eff6ff;
  --color-accent-text:     #1d4ed8;   /* accent text on light bg */

  /* Semantic */
  --color-success:         #15803d;   /* ~5.0:1 on white — AA (darkened from #16a34a for text contrast) */
  --color-success-subtle:  #f0fdf4;
  --color-warning:         #d97706;   /* ~3.0:1 on white — background use only (yellow button, dark text) */
  --color-warning-text:    #b45309;   /* ~5.0:1 on white — AA; warning text on white backgrounds (SC 1.4.3) */
  --color-warning-subtle:  #fffbeb;
  --color-danger:          #dc2626;
  --color-danger-subtle:   #fef2f2;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-family:           "Montserrat", "Helvetica Neue", sans-serif;

  --font-size-xs:          11px;
  --font-size-sm:          12px;
  --font-size-base:        14px;
  --font-size-md:          15px;
  --font-size-lg:          17px;
  --font-size-xl:          20px;
  --font-size-2xl:         24px;
  --font-size-3xl:         30px;

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

  --line-height-tight:     1.25;
  --line-height-base:      1.6;
  --line-height-relaxed:   1.75;

  --letter-spacing-tight:  -0.015em;
  --letter-spacing-wide:   0.03em;
  --letter-spacing-wider:  0.06em;

  /* ── Border radius ───────────────────────────────────────────── */
  --radius-sm:    3px;
  --radius-base:  6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-base:  0 2px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.4);

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

  /* ── Layout ──────────────────────────────────────────────────── */
  --container-max:   1200px;
  --sidebar-width:   240px;
  --nav-height:      56px;
  --content-width:   720px;
}