/* ===========================================================================
   Mabest Academy SRMS — design tokens
   ---------------------------------------------------------------------------
   Every colour, size, radius, shadow and timing in the system is named here
   and used by reference. Nothing downstream hardcodes a value, so a change to
   the brand is a change to this file.

   The palette is the one the system already used — the same blues, cyans,
   purples, greens and ambers — organised into scales so that hover, border
   and surface variants relate to each other instead of being picked by eye.
   =========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------
     #0f74ff and #00c0ff were the existing accents; #0066c6 was the sidebar
     gradient end. The rest of the ramp is derived from those three.        */
  --brand-50:  #eef5ff;
  --brand-100: #d9e8ff;
  --brand-200: #b6d3ff;
  --brand-300: #84b6ff;
  --brand-400: #4a93ff;
  --brand-500: #0f74ff;   /* primary — was --accent1 */
  --brand-600: #0066c6;   /* sidebar gradient end */
  --brand-700: #0a55a3;
  --brand-800: #0b4580;
  --brand-900: #0f3b70;

  --cyan-300:  #67e3ff;
  --cyan-400:  #22d3ee;
  --cyan-500:  #00c0ff;   /* was --accent2 */
  --cyan-600:  #06b6d4;
  --cyan-700:  #0891b2;

  --violet-400: #a855f7;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;

  /* --- Status ----------------------------------------------------------- */
  --success-50:  #dcfce7;
  --success-100: #d1fae5;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #166534;

  --warn-50:  #fef3c7;
  --warn-100: #fde68a;
  --warn-400: #fbbf24;
  --warn-500: #f59e0b;
  --warn-600: #d97706;
  --warn-700: #92400e;

  --danger-50:  #fee2e2;
  --danger-100: #fecaca;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #991b1b;

  --orange-400: #fb923c;
  --orange-600: #ea580c;

  /* --- Neutrals ---------------------------------------------------------
     Cool-tinted to sit with the blues, as the original surfaces did.       */
  --ink-900: #0f1b2d;
  --ink-800: #16263d;
  --ink-700: #213547;   /* body text — the original text colour */
  --ink-600: #35506b;
  --ink-500: #4b6b84;
  --ink-400: #64809b;
  --ink-300: #7b8a93;   /* was --muted */
  --ink-200: #9fb0c4;

  --line-100: #f1f6fc;
  --line-200: #e6eef7;
  --line-300: #d7e2f0;

  --surface-0: #ffffff;
  --surface-1: #fafcff;
  --surface-2: #f5f9ff;   /* was --bg */
  --surface-3: #eef4fb;
  --surface-4: #e8f0fa;

  /* --- Semantic aliases -------------------------------------------------- */
  --bg:      var(--surface-2);
  --panel:   var(--surface-0);
  --text:    var(--ink-700);
  --muted:   var(--ink-300);
  --border:  var(--line-200);
  --accent1: var(--brand-500);
  --accent2: var(--cyan-500);

  /* --- Gradients (unchanged in feel) ------------------------------------- */
  --grad-brand:   linear-gradient(135deg, var(--brand-500), var(--cyan-500));
  --grad-sidebar: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  --grad-hero:    linear-gradient(135deg, var(--violet-700), var(--violet-400));
  --grad-canvas:  linear-gradient(180deg, #f6faff 0%, var(--surface-2) 100%);

  /* --- Typography --------------------------------------------------------
     Plus Jakarta Sans carries headings and figures; Inter carries UI text,
     where its tighter forms and tabular numerals keep score columns aligned. */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11px — overline labels */
  --text-xs:  0.75rem;    /* 12px — meta */
  --text-sm:  0.8125rem;  /* 13px — table meta, helper text */
  --text-base:0.875rem;   /* 14px — the UI default */
  --text-md:  0.9375rem;  /* 15px — body copy */
  --text-lg:  1.0625rem;  /* 17px — card titles */
  --text-xl:  1.25rem;    /* 20px — section headings */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --text-4xl: clamp(1.75rem, 1.1rem + 2.6vw, 2.6rem);

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-normal:1.6;

  --tracking-tight: -0.018em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px;

  /* --- Radii -------------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 10px;  --r-lg: 14px;
  --r-xl: 18px; --r-2xl: 24px; --r-full: 999px;
  --radius: var(--r-md);

  /* --- Elevation ---------------------------------------------------------
     Two-layer shadows: a tight contact shadow plus a soft ambient one. The
     single large blur used before made cards look like they were floating.  */
  --shadow-xs: 0 1px 2px rgba(16, 40, 76, .06);
  --shadow-sm: 0 1px 2px rgba(16, 40, 76, .06), 0 2px 6px rgba(16, 40, 76, .05);
  --shadow:    0 1px 2px rgba(16, 40, 76, .05), 0 4px 14px rgba(16, 40, 76, .06);
  --shadow-md: 0 2px 4px rgba(16, 40, 76, .05), 0 8px 24px rgba(16, 40, 76, .08);
  --shadow-lg: 0 4px 8px rgba(16, 40, 76, .06), 0 16px 42px rgba(16, 40, 76, .12);
  --shadow-xl: 0 8px 16px rgba(16, 40, 76, .08), 0 28px 70px rgba(16, 40, 76, .16);
  --ring: 0 0 0 3px rgba(15, 116, 255, .28);

  /* Inline icon for validation messages; a data URI costs no request. */
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");

  /* --- Motion -------------------------------------------------------------
     One easing curve throughout: quick to start, settling at the end.       */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast:   120ms;
  --t-normal: 180ms;
  --t-slow:   260ms;
  --transition-fast:   var(--t-fast) var(--ease);
  --transition-normal: var(--t-normal) var(--ease);
  --transition-slow:   var(--t-slow) var(--ease);

  /* --- Layout -------------------------------------------------------------- */
  --sidebar-w: 268px;
  --sidebar-collapsed-w: 76px;
  --topbar-h: 62px;
  --content-max: 1480px;

  /* --- Stacking ------------------------------------------------------------
     Named so a new overlay never has to guess a number.                      */
  --z-base: 1;
  --z-sticky: 30;
  /* The drawer scrim must sit UNDER the sidebar: at 80 it covered the
     sidebar itself, blurring the navigation and swallowing every tap on
     mobile. --z-overlay stays above the sidebar for things that genuinely
     belong on top of it, such as the collapsed-nav tooltips. */
  --z-scrim: 70;
  --z-sidebar: 75;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 95;
  --z-confirm: 100;
}

/* Honour the operating system's reduced-motion setting everywhere at once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-normal: 1ms; --t-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}