/**
 * Учебный портал — Design Tokens
 * CSS Custom Properties for colors, typography, spacing, and shadows.
 *
 * Usage: linked from base.html. Requires Inter from Google Fonts (already in base.html).
 */

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {
  /* ── Brand (Blue) ── */
  --color-brand-50:  #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-900: #1e3a8a;

  /* ── Neutral ── */
  --color-bg:            #f9fafb;   /* gray-50  — page background */
  --color-surface:       #ffffff;   /* white    — cards, navbar, footer */
  --color-border:        #f3f4f6;   /* gray-100 — card borders */
  --color-border-input:  #d1d5db;   /* gray-300 — input borders */
  --color-border-medium: #e5e7eb;   /* gray-200 — dividers */

  --color-text-heading:  #111827;   /* gray-900 — h1–h3 */
  --color-text-default:  #374151;   /* gray-700 — body copy */
  --color-text-body:     #4b5563;   /* gray-600 — nav links, descriptions */
  --color-text-muted:    #6b7280;   /* gray-500 — meta, dates, subtitles */
  --color-text-faint:    #9ca3af;   /* gray-400 — placeholders, captions */
  --color-text-ultra:    #d1d5db;   /* gray-300 — decoration */

  /* ── Semantic ── */
  --color-success:    #16a34a;   /* green-600 */
  --color-success-bg: #f0fdf4;   /* green-50  */
  --color-success-bd: #bbf7d0;   /* green-200 */

  --color-warning:    #d97706;   /* amber-600 */
  --color-warning-bg: #fffbeb;   /* amber-50  */
  --color-warning-bd: #fcd34d;   /* amber-300 */

  --color-error:    #dc2626;   /* red-600 */
  --color-error-bg: #fef2f2;   /* red-50   */
  --color-error-bd: #fecaca;   /* red-200  */

  --color-info:    #2563eb;   /* blue-600 */
  --color-info-bg: #eff6ff;   /* blue-50  */
  --color-info-bd: #bfdbfe;   /* blue-200 */

  --color-purple:    #9333ea;   /* purple-600 */
  --color-purple-bg: #faf5ff;   /* purple-50  */
  --color-purple-bd: #e9d5ff;   /* purple-200 */

  --color-cyan:    #0891b2;   /* cyan-600 */
  --color-cyan-bg: #ecfeff;   /* cyan-50  */
  --color-cyan-bd: #a5f3fc;   /* cyan-200 */

  /* ── Dark mode palette (Slate) ── */
  --color-dark-bg:       #0f172a;   /* slate-900 */
  --color-dark-surface:  #1e293b;   /* slate-800 */
  --color-dark-surface2: #334155;   /* slate-700 */
  --color-dark-border:   #334155;   /* slate-700 */
  --color-dark-text:     #f1f5f9;   /* slate-100 */
  --color-dark-muted:    #94a3b8;   /* slate-400 */
  --color-dark-faint:    #475569;   /* slate-600 */
  --color-dark-accent:   #22d3ee;   /* cyan-400  — hover links in dark */

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'SFMono-Regular', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;

  --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 */
  --text-5xl:  3rem;       /* 48px */

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

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ============================================================
     SPACING & LAYOUT TOKENS
     ============================================================ */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

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

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-floating: 0 4px 20px rgba(0, 0, 0, 0.15);

  --z-navbar:  50;
  --z-modal:   100;
  --z-tooltip: 200;

  --transition-colors:   color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  --transition-all:      all 0.3s ease;
  --transition-shadow:   box-shadow 0.2s ease;
  --transition-transform: transform 0.2s ease;
}