/* ==========================================================================
   MMBC Attendance - Design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, space, elevation and motion.
   Components never hard-code a colour or a duration; they reference a token,
   so a brand adjustment happens here and nowhere else.

   Brand primary: #48488C
   ========================================================================== */

:root {
  /* --- Brand ramp -------------------------------------------------------
     Built around the MMBC primary. 600 is the brand colour itself; lighter
     steps carry surfaces and tints, darker steps carry hover and text. */
  --mmbc-50:  #f3f3f9;
  --mmbc-100: #e6e6f2;
  --mmbc-200: #cbcbe5;
  --mmbc-300: #a8a8d2;
  --mmbc-400: #8181bb;
  --mmbc-500: #6060a4;
  --mmbc-600: #48488c; /* brand */
  --mmbc-700: #3c3c76;
  --mmbc-800: #313161;
  --mmbc-900: #27274d;
  --mmbc-950: #191930;

  /* --- Neutrals ---------------------------------------------------------
     Very slightly cool so they sit correctly beside the brand violet. */
  --gray-0:   #ffffff;
  --gray-25:  #fbfbfd;
  --gray-50:  #f7f7fa;
  --gray-100: #efeff4;
  --gray-200: #e2e2ea;
  --gray-300: #cbcbd7;
  --gray-400: #9c9cae;
  --gray-500: #71718a;
  --gray-600: #56566d;
  --gray-700: #414155;
  --gray-800: #2c2c3b;
  --gray-900: #1c1c27;
  --gray-950: #111119;

  /* --- Status ----------------------------------------------------------
     Each status has a text tone, a surface tone and a border tone. Status is
     never signalled by colour alone: components pair these with an icon and
     a text label. */
  --success-50:  #e8f6f1;
  --success-100: #cfebe1;
  --success-600: #10785c;
  --success-700: #0c5f49;

  --warning-50:  #fef4e6;
  --warning-100: #fce6c4;
  --warning-600: #a45606;
  --warning-700: #824404;

  --danger-50:   #fdecea;
  --danger-100:  #fad5d1;
  --danger-600:  #b42318;
  --danger-700:  #8f1c13;

  --info-50:     #eaf1fe;
  --info-100:    #d3e1fc;
  --info-600:    #1554c0;
  --info-700:    #10429a;

  /* --- Semantic surfaces ------------------------------------------------ */
  --surface-page:     var(--gray-50);
  --surface-card:     var(--gray-0);
  --surface-raised:   var(--gray-0);
  --surface-sunken:   var(--gray-100);
  --surface-inverse:  var(--mmbc-900);
  --surface-hover:    var(--gray-100);
  --surface-active:   var(--gray-200);
  --surface-brand:    var(--mmbc-600);
  --surface-brand-soft: var(--mmbc-50);

  /* --- Semantic text ---------------------------------------------------- */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-disabled:  var(--gray-400);
  --text-inverse:   var(--gray-0);
  --text-brand:     var(--mmbc-700);
  --text-link:      var(--mmbc-700);

  /* --- Borders ---------------------------------------------------------- */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--mmbc-600);

  /* --- Focus ------------------------------------------------------------
     A single, highly visible focus treatment used everywhere. Never removed. */
  --focus-ring-color: var(--mmbc-500);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* --- Typography -------------------------------------------------------
     System fonts only. The application ships no webfont and contacts no CDN. */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo,
               monospace;

  --text-2xs: 0.6875rem; /* 11px */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.8125rem; /* 13px */
  --text-md:  0.875rem;  /* 14px - application default */
  --text-base:0.9375rem; /* 15px */
  --text-lg:  1.0625rem; /* 17px */
  --text-xl:  1.25rem;   /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.55;

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

  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  /* --- Space (4px base) -------------------------------------------------- */
  --space-0: 0;
  --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;

  /* --- Radii ------------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* --- Elevation ---------------------------------------------------------
     Layered, low-opacity shadows tinted toward the brand rather than pure
     black, which keeps surfaces from looking grey and dirty. */
  --shadow-xs: 0 1px 2px rgba(25, 25, 48, 0.05);
  --shadow-sm: 0 1px 2px rgba(25, 25, 48, 0.06), 0 1px 3px rgba(25, 25, 48, 0.06);
  --shadow-md: 0 2px 4px rgba(25, 25, 48, 0.06), 0 4px 12px rgba(25, 25, 48, 0.08);
  --shadow-lg: 0 4px 8px rgba(25, 25, 48, 0.07), 0 12px 28px rgba(25, 25, 48, 0.12);
  --shadow-xl: 0 8px 16px rgba(25, 25, 48, 0.08), 0 24px 48px rgba(25, 25, 48, 0.16);

  /* --- Motion ------------------------------------------------------------
     150-250ms, purposeful. Every transition is disabled wholesale under
     prefers-reduced-motion (see base.css). */
  --duration-instant: 90ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
  --ease-out: cubic-bezier(0.22, 0.8, 0.28, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.3, 1);
  --ease-spring: cubic-bezier(0.28, 1.2, 0.4, 1);

  /* --- Layout ------------------------------------------------------------ */
  --sidebar-width: 260px;
  --sidebar-width-compact: 64px;
  --topbar-height: 60px;
  --content-max-width: 1400px;

  /* --- Stacking ----------------------------------------------------------
     Named layers so z-index never becomes a guessing game. */
  --z-base: 1;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  /* A dropdown opened from the page must clear the top bar; one opened inside
     a drawer is painted in the drawer's own stacking context, so the same
     value is correct in both places. */
  --z-popover: 350;
  --z-drawer: 400;
  --z-modal: 500;
  --z-palette: 600;
  --z-toast: 700;
}