/* ==========================================================================
   SchoolGuardian Design Tokens
   Brand: Red / Black / White — premium enterprise SaaS palette.
   Light theme = :root defaults. Dark theme = [data-theme="dark"] overrides.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --brand-50:  #fdeaea;
  --brand-100: #fad0d2;
  --brand-200: #f3a3a7;
  --brand-300: #ea767c;
  --brand-400: #e14956;
  --brand-500: #d5182d;   /* primary brand red */
  --brand-600: #b81226;
  --brand-700: #a8121f;
  --brand-800: #7e0e18;
  --brand-900: #560a11;

  /* ---- Ink / neutrals ---- */
  --ink-0:   #ffffff;
  --ink-25:  #f7f7f8;
  --ink-50:  #f1f1f3;
  --ink-100: #e4e4e7;
  --ink-200: #d0d0d5;
  --ink-300: #a6a6ab;
  --ink-400: #85858c;
  --ink-500: #6b6b70;
  --ink-600: #505055;
  --ink-700: #38383c;
  --ink-800: #2e2e32;
  --ink-900: #1a1a1d;
  --ink-950: #0b0b0c;

  /* ---- Semantic ---- */
  --success-500: #12b76a;
  --success-100: #d1fadf;
  --warning-500: #f79009;
  --warning-100: #ffeacb;
  --danger-500:  #f04438;
  --danger-100:  #fee4e2;
  --info-500:    #475467;
  --info-100:    #eaecf0;

  /* ---- Surfaces (light theme) ---- */
  --bg-canvas:    var(--ink-25);
  --bg-surface:   var(--ink-0);
  --bg-surface-2: var(--ink-50);
  --bg-elevated:  var(--ink-0);
  --bg-inverse:   var(--ink-950);
  --bg-glass:     rgba(255, 255, 255, 0.65);

  /* ---- Text (light theme) ---- */
  --text-primary:   var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-400);
  --text-inverse:   var(--ink-0);
  --text-brand:     var(--brand-600);

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

  /* ---- Shadows (light theme) ---- */
  --shadow-xs: 0 1px 2px rgba(11, 11, 12, 0.04);
  --shadow-sm: 0 2px 8px rgba(11, 11, 12, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 11, 12, 0.08);
  --shadow-lg: 0 16px 48px rgba(11, 11, 12, 0.12);
  --shadow-xl: 0 24px 64px rgba(11, 11, 12, 0.16);
  --shadow-brand: 0 12px 32px rgba(213, 24, 45, 0.24);

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 55%, var(--ink-950) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--brand-50) 0%, var(--ink-0) 60%);
  --gradient-hero: radial-gradient(circle at 15% 20%, rgba(213, 24, 45, 0.16), transparent 45%),
                    radial-gradient(circle at 85% 0%, rgba(213, 24, 45, 0.10), transparent 40%),
                    linear-gradient(180deg, var(--ink-25) 0%, var(--ink-0) 100%);
  --gradient-text: linear-gradient(100deg, var(--ink-950) 20%, var(--brand-600) 60%, var(--brand-500) 100%);

  /* ---- Typography ---- */
  --font-base: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-6xl: 3.75rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---- Spacing scale ---- */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* ---- Layout ---- */
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 84px;
  --topbar-h: 72px;
  --container-max: 1280px;

  color-scheme: light;
}

/* ==========================================================================
   Dark theme overrides
   ========================================================================== */
[data-theme="dark"] {
  --bg-canvas:    var(--ink-950);
  --bg-surface:   #0f0f11;
  --bg-surface-2: var(--ink-900);
  --bg-elevated:  #17171a;
  --bg-inverse:   var(--ink-0);
  --bg-glass:     rgba(23, 23, 26, 0.65);

  --text-primary:   var(--ink-25);
  --text-secondary: var(--ink-300);
  --text-tertiary:  var(--ink-500);
  --text-inverse:   var(--ink-950);
  --text-brand:     var(--brand-400);

  --border-subtle: var(--ink-800);
  --border-default: var(--ink-700);
  --border-strong: var(--ink-600);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0 12px 40px rgba(213, 24, 45, 0.35);

  --gradient-brand-soft: linear-gradient(135deg, rgba(213, 24, 45, 0.14) 0%, var(--bg-surface) 60%);
  --gradient-hero: radial-gradient(circle at 15% 20%, rgba(213, 24, 45, 0.22), transparent 45%),
                    radial-gradient(circle at 85% 0%, rgba(213, 24, 45, 0.14), transparent 40%),
                    linear-gradient(180deg, var(--ink-950) 0%, #0f0f11 100%);
  --gradient-text: linear-gradient(100deg, var(--ink-25) 20%, var(--brand-400) 60%, var(--brand-500) 100%);

  color-scheme: dark;
}