/* ═══════════════════════════════════════════════════
   EduPlatform — Design Tokens
   Единый источник CSS custom properties.
   Используется всеми layouts: landing, app, dashboard, admin.
═══════════════════════════════════════════════════ */

:root {
  /* ── Colors: light theme (default) ── */
  --color-bg:            #f5f7fb;
  --color-bg-alt:        #eef1f8;
  --color-surface:       #ffffff;
  --color-surface-2:     #f0f3fa;
  --color-surface-hover: #e8ecf7;

  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.16);
  --color-border-focus:  rgba(99, 102, 241, 0.45);

  --color-text:          #1a1d2e;
  --color-text-2:        #5a6478;
  --color-text-3:        #9aa3b2;
  --color-text-inverse:  #ffffff;

  /* ── Accent / Primary ── */
  --color-primary:       #6366f1;
  --color-primary-dark:  #4f46e5;
  --color-primary-light: #818cf8;
  --color-primary-glow:  rgba(99, 102, 241, 0.10);
  --color-primary-subtle:rgba(99, 102, 241, 0.06);

  /* ── Semantic ──
     Text-color values are darkened for AA contrast on the light surface
     (4.5:1+ against both --color-surface and the tinted *-bg below).
     Dark theme overrides these back to the brighter, saturated values. */
  --color-success:       #047857;
  --color-success-bg:    rgba(16, 185, 129, 0.12);
  --color-success-border:rgba(16, 185, 129, 0.25);

  --color-warning:       #92400e;
  --color-warning-bg:    rgba(245, 158, 11, 0.12);
  --color-warning-border:rgba(245, 158, 11, 0.25);

  --color-danger:        #b91c1c;
  --color-danger-bg:     rgba(239, 68, 68, 0.12);
  --color-danger-border: rgba(239, 68, 68, 0.25);

  --color-info:          #1d4ed8;
  --color-info-bg:       rgba(59, 130, 246, 0.12);
  --color-info-border:   rgba(59, 130, 246, 0.25);

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;

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

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

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

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 3px  rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --transition:    0.18s ease;
  --transition-lg: 0.28s ease;

  /* ── Code blocks ── */
  --color-code-bg:     #0d1117;
  --color-code-bg-2:   #161b27;
  --color-code-text:   #c9d1d9;
  --color-code-stdout: #58d68d;
  --color-code-stderr: #e74c3c;

  /* ── Layout ── */
  --sidebar-width:       240px;
  --sidebar-width-admin: 220px;
  --header-height:       60px;
  --content-max-width:   1200px;
}

/* ── Dark theme overrides ── */
[data-theme="dark"] {
  --color-bg:           #0d0f16;
  --color-bg-alt:       #111420;
  --color-surface:      #161b27;
  --color-surface-2:    #1c2235;
  --color-surface-hover:#202840;

  --color-border:       rgba(255, 255, 255, 0.07);
  --color-border-strong:rgba(255, 255, 255, 0.14);
  --color-border-focus: rgba(99, 102, 241, 0.55);

  --color-text:         #e2e8f0;
  --color-text-2:       #8892a4;
  --color-text-3:       #525d70;
  --color-text-inverse: #0d0f16;

  --color-primary-glow:  rgba(99, 102, 241, 0.15);
  --color-primary-subtle:rgba(99, 102, 241, 0.08);

  /* Semantic text colors: brighter, saturated values read fine on the dark surface */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
  --color-info:    #3b82f6;

  --shadow-xs: 0 1px 3px  rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.44);
}