/* =========================================================================
   ApexityEdu — Design Tokens
   ApexityEdu — calm, clear tools for every campus.
   ========================================================================= */

:root {
  /* --- Palette ----------------------------------------------------------
     Light mint and lavender surfaces with deep navy text. Green is the
     primary action color; blue and violet support links and highlights.
     ------------------------------------------------------------------- */
  --paper:        #F8FAF9;
  --paper-soft:   #EAFaf2;
  --paper-deep:   #E9FCF4;
  --surface:      #FFFFFF;
  --surface-tint: #F8FCFA;

  --ink:          #072032;
  --ink-soft:     #1F2D3D;
  --ink-mute:     #647487;
  --ink-faint:    #97A5B3;

  /* Intentional dark chrome — topbar, sidebar accent, sticky bar, bulk bar,
     toast, identity banner, auth aside. Stays dark in BOTH themes so the
     light text on it remains readable. Use --on-ink-surface for text on
     these surfaces. */
  --ink-surface: #072032;
  --on-ink-surface: #F8FAF9;

  --mute:         #C8D8CF;
  --hairline:     #DCE9E2;
  --hairline-strong: #B9CEC2;

  --marigold:     #48C286;
  --marigold-soft:#E9FCF4;
  --marigold-deep:#198754;

  --vermillion:   #C8412B;
  --vermillion-soft:#F6D7D1;
  --vermillion-deep:#A8341F;   /* hover state — used by .btn-danger:hover */

  --forest:       #198754;
  --forest-soft:  #E9FCF4;

  --indigo:       #53A2FF;
  --indigo-soft:  #EAF3FF;
  --brand-purple: #563EEA;
  --brand-teal:   #5ADFCD;

  --plum:         #6E2B58;
  --plum-soft:    #ECD4E2;

  --slate:        #4A5C6A;
  --slate-soft:   #D4DCE1;

  /* Status colors map to chips */
  --status-present: var(--forest);
  --status-late:    var(--marigold-deep);
  --status-absent:  var(--vermillion);
  --status-leave:   var(--indigo);
  --status-paid:    var(--forest);
  --status-due:     var(--vermillion);
  --status-draft:   var(--ink-mute);
  --status-published: var(--indigo);
  --status-issued:  var(--forest);
  --status-overdue: var(--vermillion);
  --status-pending: var(--marigold-deep);
  --status-approved: var(--forest);
  --status-rejected: var(--vermillion);

  /* --- Typography ------------------------------------------------------
     Fraunces (display serif) + Spline Sans (body grotesk) + Hind Siliguri
     (Bengali) + IBM Plex Mono (tabular figures). NOT the default
     Playfair+Inter pairing.
     ------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-bengali: "Hind Siliguri", "Noto Sans Bengali", "Spline Sans", sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale — slightly compressed for density */
  --fs-2xs:  0.6875rem;  /* 11px */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-md:   0.9375rem;  /* 15px */
  --fs-lg:   1.0625rem;  /* 17px */
  --fs-xl:   1.375rem;   /* 22px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.75rem;    /* 44px */
  --fs-4xl:  3.75rem;    /* 60px */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.45;
  --lh-loose: 1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* --- Spacing scale (4px base) -------------------------------------- */
  --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;

  /* --- Radii — mostly square, hints of roundness on chips/pills ------- */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Shadows — restrained ------------------------------------------ */
  --shadow-none: none;
  --shadow-sm: 0 1px 0 rgba(20,20,43,0.04);
  --shadow-md: 0 1px 2px rgba(20,20,43,0.06), 0 2px 8px rgba(20,20,43,0.04);
  --shadow-lg: 0 4px 12px rgba(20,20,43,0.08), 0 8px 28px rgba(20,20,43,0.10);
  --shadow-drawer: -12px 0 32px rgba(20,20,43,0.10);

  /* Scrim — used by modal/drawer/sidebar backdrops. Darker in dark mode. */
  --scrim: rgba(20,20,43,0.32);

  /* --- Layout -------------------------------------------------------- */
  --ribbon-h: 4px;
  --topbar-h: 60px;
  --sidebar-w: 248px;
  --sidebar-collapsed-w: 0px;
  --content-max: 1180px;
  --drawer-w: 480px;
  --drawer-w-wide: 640px;

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

  /* --- Z-index ------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-ribbon: 700;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(34,201,122,0.32);

  /* =========================================================================
     Semantic colour roles (v2.16) — the ON switch for re-skinning the whole
     app's accent without hunting through component CSS. Every one of these
     aliases references a token above; a school theme overrides these roles
     (e.g. `--accent`, `--sidebar-active-bg`, `--btn-accent-bg`) to recolour
     the entire application while keeping its layout identical.
     ========================================================================= */
  --accent:                 var(--marigold);
  --accent-strong:          var(--marigold-deep);
  --accent-soft:            var(--marigold-soft);
  --accent-on:              #FFFFFF;           /* text/icon on accent fills */

  --link:                   var(--brand-blue);
  --link-hover:             var(--brand-blue-light);

  --selection-bg:           var(--marigold-soft);
  --selection-fg:           var(--ink);

  --topbar-bg:              var(--surface);
  --topbar-fg:              var(--ink);
  --topbar-border:          var(--hairline);

  --sidebar-bg:             var(--surface);
  --sidebar-fg:             var(--ink-soft);
  --sidebar-hover-bg:       var(--paper-soft);
  --sidebar-hover-fg:       var(--ink);
  --sidebar-active-bg:      var(--paper-soft);
  --sidebar-active-fg:      var(--ink);
  --sidebar-active-border:  var(--marigold);
  --nav-active-color:       var(--marigold-deep);  /* bottom-nav active item */

  --ribbon-color:           var(--marigold);

  --btn-primary-bg:         var(--ink-surface);
  --btn-primary-fg:         var(--on-ink-surface);
  --btn-primary-hover:      var(--ink-soft);
  --btn-accent-bg:          var(--marigold);
  --btn-accent-fg:          #072032;
  --btn-accent-hover:       var(--marigold-deep);
  --btn-danger-bg:          var(--vermillion);
  --btn-danger-fg:          #FFFFFF;
  --btn-danger-hover:       var(--vermillion-deep);
  --btn-success-bg:         var(--forest);
  --btn-success-fg:         #FFFFFF;
  --btn-success-hover:      var(--forest);

  --input-bg:               var(--surface);
  --input-border:           var(--hairline-strong);
  --input-focus-border:     var(--marigold);

  --table-head-bg:          var(--paper-soft);
  --table-head-fg:          var(--ink);
  --table-row-alt:          var(--surface-tint);
  --card-bg:                var(--surface);
  --card-border:            var(--hairline);

  --modal-bg:               var(--surface-raised);

  --brand-accent:           var(--marigold);       /* colophon mark / logo accent */
  --auth-aside-bg:          var(--ink-surface);    /* login aside panel */
  --auth-aside-fg:          var(--on-ink-surface);
  --brand-blue:             #53A2FF;
  --brand-blue-light:       #5ADFCD;
}


@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* =========================================================================
   Dark theme overrides (v2.6)
   =========================================================================
   Triggered by `<html data-theme="dark">`. Set by the inline FOUC-prevention
   script in each HTML <head> (reads localStorage 'vectis.theme' first, falls
   back to OS preference on first visit). Toggled at runtime by the
   renderThemeToggle() button in the app topbar (and a parallel button in
   the superadmin topbar).

   Only palette + shadow + scrim + focus-ring need overriding — everything
   else (status colors, typography, spacing, radii, z-index, motion, layout)
   either references palette vars (status) or is theme-agnostic.
   ========================================================================= */
[data-theme="dark"] {
  /* Palette — invert paper ↔ ink, lift surfaces, keep accents readable */
  --paper:        #0D1926;
  --paper-soft:   #122235;
  --paper-deep:   #1A3045;
  --surface:      #14263A;
  --surface-tint: #192D42;

  --ink:          #F1F7F4;
  --ink-soft:     #D0DDD6;
  --ink-mute:     #9AADA3;
  --ink-faint:    #6E8278;

  /* Intentional dark chrome stays dark — these do NOT invert. */
  --ink-surface: #072032;
  --on-ink-surface: #F1F7F4;

  --mute:         #32495E;
  --hairline:     #294056;
  --hairline-strong: #3C5870;

  /* Accents — keep hues, lighten for contrast on dark surfaces */
  --marigold:      #50D69C;
  --marigold-soft: #153A2B;
  --marigold-deep: #50D69C;

  --vermillion:       #E5604A;
  --vermillion-soft:  #3A1D18;
  --vermillion-deep:  #E5604A;

  --forest:       #53D58F;
  --forest-soft:  #173A2B;

  --indigo:       #86B8FF;
  --indigo-soft:  #1B3150;
  --brand-purple: #9B8CFF;
  --brand-teal:   #5ADFCD;

  --plum:         #B8649A;
  --plum-soft:    #3A1E32;

  --slate:        #7B8C9A;
  --slate-soft:   #1F2A30;

  /* Shadows — stronger scrims on dark surfaces */
  --shadow-sm: 0 1px 0 rgba(0,0,0,0.30);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.30);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.50), 0 8px 28px rgba(0,0,0,0.55);
  --shadow-drawer: -12px 0 32px rgba(0,0,0,0.55);

  /* Scrim — darker for contrast against dark surfaces */
  --scrim: rgba(0,0,0,0.55);

  /* Focus ring — slightly brighter on dark */
  --focus-ring: 0 0 0 3px rgba(54,217,141,0.42);

  /* Semantic colour roles — dark-mode defaults. A school theme overrides
     these to re-skin the whole app's accent in BOTH themes. */
  --accent:               var(--marigold);
  --accent-strong:        var(--marigold-deep);
  --accent-soft:          var(--marigold-soft);
  --accent-on:            #072032;

  --link:                 var(--indigo);
  --link-hover:           var(--indigo);

  --selection-bg:         var(--marigold-soft);
  --selection-fg:         var(--ink);

  --topbar-bg:            var(--surface);
  --topbar-fg:            var(--ink);
  --topbar-border:        var(--hairline);

  --sidebar-bg:           var(--surface);
  --sidebar-fg:           var(--ink-soft);
  --sidebar-hover-bg:     var(--paper-soft);
  --sidebar-hover-fg:     var(--ink);
  --sidebar-active-bg:    var(--paper-soft);
  --sidebar-active-fg:    var(--ink);
  --sidebar-active-border:var(--marigold);
  --nav-active-color:     var(--marigold-deep);

  --ribbon-color:         var(--marigold);

  --btn-primary-bg:       var(--ink-surface);
  --btn-primary-fg:       var(--on-ink-surface);
  --btn-primary-hover:    var(--ink-soft);
  --btn-accent-bg:        var(--marigold);
  --btn-accent-fg:        #072032;
  --btn-accent-hover:     var(--marigold-deep);
  --btn-danger-bg:        var(--vermillion);
  --btn-danger-fg:        #FFFFFF;
  --btn-danger-hover:     var(--vermillion-deep);
  --btn-success-bg:       var(--forest);
  --btn-success-fg:       #FFFFFF;
  --btn-success-hover:    var(--forest);

  --input-bg:             var(--surface);
  --input-border:         var(--hairline-strong);
  --input-focus-border:   var(--marigold);

  --table-head-bg:        var(--paper-soft);
  --table-head-fg:        var(--ink);
  --table-row-alt:        var(--surface-tint);
  --card-bg:              var(--surface);
  --card-border:          var(--hairline);

  --modal-bg:             var(--surface-raised);

  --brand-accent:         var(--marigold);
  --auth-aside-bg:        var(--ink-surface);
  --auth-aside-fg:        var(--on-ink-surface);
  --brand-blue:           #86A9FF;
  --brand-blue-light:     #A9C4FF;
}