/* ============================================================================
   LIBESOLE — DESIGN TOKENS
   The ONLY place colour, spacing and type are defined.  [KICKOFF 6.2]

   THE PORTAL IS DARK BY DEFAULT: deep black ground, midnight-navy cards,
   electric blue for what you press, cyan for the numbers that matter, violet
   and a touch of magenta as accents — a premium, quiet dark, not a game. Neon
   is used sparingly: a glow on the primary button, the active menu item and
   the cards that matter, never on every edge. The DARK THEME block below is
   that design; the light theme is kept as a choice on the profile page.

   Indigo (#4B0082) and cyan (#00E5FF) remain the brand. On white, indigo does
   the work; cyan is far too light to read on white (1.4:1), so there it only
   marks panels. On the dark ground cyan is the figure colour, and electric
   blue — light enough to read as text there — is the primary.

   Never write a hex value in a component file. Add a token here instead.
   ============================================================================ */

:root {
  /* ---- brand indigo ---- */
  --indigo-50:  #f6eefc;
  --indigo-100: #ece0f8;
  --indigo-200: #d9c2f1;
  --indigo-300: #bc96e6;
  --indigo-400: #9a64d8;
  --indigo-500: #7b39c4;
  --indigo-600: #4b0082;        /* PRIMARY — the brand indigo itself */
  --indigo-700: #3c0069;
  --indigo-800: #2e0050;        /* deep indigo — headers, sidebar */
  --indigo-900: #21003a;

  /* ---- brand cyan. 500 is the brand value; 700 and 800 are the darkened
         versions it takes to be legible AS TEXT on white, because #00E5FF on
         white is 1.4:1 and unreadable. ---- */
  --cyan-50:  #e6fbff;
  --cyan-100: #c7f5fd;
  --cyan-200: #9de9f5;
  --cyan-400: #4de8ff;
  --cyan-500: #00e5ff;
  --cyan-700: #007a8c;
  --cyan-800: #005e6b;

  /* ---- neutrals, biased very slightly cool so they sit with the brand ---- */
  --white:    #ffffff;
  --grey-25:  #fbfcfe;
  --grey-50:  #f6f8fc;
  --grey-100: #eef2f8;
  --grey-200: #e1e8f2;
  --grey-300: #cbd6e5;
  --grey-400: #94a4bb;
  /* grey-500 carries --ink-muted, which is the colour of nearly every secondary
     line in the product: stat labels, table headings, "Class 10-A · Roll no. 01".
     It was #6b7d95, which reads at 4.21:1 on white and 3.74:1 on a sunk panel —
     both under the 4.5:1 that WCAG AA asks for body text. Darkened until it
     clears 4.5:1 on every background in this file, with the lowest being 4.83:1
     against --surface-sunk. Still clearly lighter than --ink-soft. */
  --grey-500: #5a6b84;
  --grey-600: #4d5e75;
  --grey-700: #35455a;
  --grey-800: #1f2c3d;
  --grey-900: #131c28;

  /* ---- semantic. Separate from the brand hues on purpose: a status must
         never be confused with a button.  ---- */
  --green-50:  #ecfdf3;  --green-200: #b7e4c9;  --green-500: #12a150;  --green-700: #0a7c3c;
  /* Amber is the one semantic hue that had to be darkened to be readable: at
     #d98b06 a warning figure sat at 2.75:1 on white, and #a8690a label text on
     an amber panel at 4.24:1. Both now clear AA — 3.37:1 for the large figure,
     4.82:1 for the label. Green and red already passed and are untouched. */
  --amber-50:  #fff8eb;  --amber-200: #f5d99b;  --amber-500: #c47c05;  --amber-700: #9c6109;
  --red-50:    #fef2f2;  --red-200:   #f3bdbd;  --red-500:   #dc2626;  --red-700:   #b01c1c;

  /* ---- roles ---- */
  --bg:            var(--grey-50);
  --surface:       var(--white);
  --surface-alt:   var(--grey-25);
  --surface-sunk:  var(--grey-100);

  --ink:           var(--grey-800);
  --ink-soft:      var(--grey-600);
  --ink-muted:     var(--grey-500);
  --ink-invert:    var(--white);

  --line:          var(--grey-200);
  --line-strong:   var(--grey-300);

  /* The scrollbar. Its own tokens because it is drawn over every surface and
     has to stay legible on all of them without being the loudest thing on the
     page — a bar you can see when you look for it and not before. */
  /* School houses. One pair per house — the colour itself, and a wash to sit
     behind text on it — because a house is only useful if it is the same
     colour everywhere it appears. The keys match utils/constants.js. */
  --house-green:   #16794a;  --house-green-soft:  #e6f4ec;
  --house-red:     #c0332e;  --house-red-soft:    #fbeaea;
  /* Yellow and orange darkened until they clear 4.5:1 on their own washes —
     the Activity pages show every house at once, and those two sat at 4.25
     and 4.45. */
  --house-yellow:  #8a5f00;  --house-yellow-soft: #fdf3da;
  --house-orange:  #a24a06;  --house-orange-soft: #fdeee0;
  --house-blue:    #1d4ed8;  --house-blue-soft:   #e6edfd;

  /* Colours a house can wear beyond the first five. Real colours — a purple
     house is purple — with a wash that text can sit on. */
  --house-purple:  #6d28d9;  --house-purple-soft: #efe7fd;
  --house-maroon:  #8a1c3a;  --house-maroon-soft: #f8e6ec;
  --house-sky:     #0369a1;  --house-sky-soft:    #e0f2fe;
  --house-pink:    #be185d;  --house-pink-soft:   #fce7f3;

  /* The academic calendar's month view: one colour per kind of day, each with
     a wash. A holiday (and a Sunday) is red, as on every Indian wall calendar;
     a festival is saffron; a school event violet; the rest their own. */
  --cal-holiday:  #c62828;  --cal-holiday-soft:  #fdecec;
  --cal-festival: #b84306;  --cal-festival-soft: #fff0e3;
  --cal-event:    #6d28d9;  --cal-event-soft:    #f1eafe;
  --cal-activity: #be185d;  --cal-activity-soft: #fde7f1;
  --cal-exam:     #8a5f00;  --cal-exam-soft:     #fdf3da;
  --cal-meeting:  #0369a1;  --cal-meeting-soft:  #e2f1fb;
  --cal-term:     #15803d;  --cal-term-soft:     #e8f7ee;

  --scroll-thumb:       var(--grey-300);
  --scroll-thumb-hover: var(--grey-500);
  --scroll-track:       transparent;

  --primary:       var(--indigo-600);
  --primary-hover: var(--indigo-700);
  --primary-soft:  var(--indigo-50);
  /* One step stronger, for hovering something already tinted — an unread
     message. A raw palette colour would be wrong here: it would stay light in
     the dark theme and glare. */
  --primary-soft-2: var(--indigo-100);
  /* The focus ring. Indigo rather than the brand cyan on purpose: a ring has to
     be SEEN against the white page behind it, and cyan at 1.4:1 would be a
     focus indicator that keyboard users cannot find. */
  --primary-ring:  rgba(75, 0, 130, 0.22);

  --sidebar-bg:    var(--indigo-800);
  --sidebar-ink:   #d5c2ec;
  --sidebar-active:#6a0dad;

  /* ---- the premium layer. In the light theme every one of these falls back
         to the plain value it replaced; the dark theme gives them gradients
         and glow. Components use these, so neither theme needs a special case. */
  --bg-image:            none;              /* ambient light behind the page */
  --sidebar-bg-image:    none;
  --sidebar-active-edge: transparent;       /* the bar beside the current page */
  --sidebar-glow:        none;
  --surface-glass:       var(--surface);    /* the top bar */
  --field-bg:            var(--surface);    /* inputs, selects, textareas */
  --card-edge:           var(--line);
  --card-shadow:         var(--shadow-sm);
  --card-glow:           var(--shadow);     /* a card that matters more */
  --primary-fill:        var(--primary);    /* primary button: a colour or a gradient */
  --primary-solid:       var(--primary);    /* the button's own colour, under any gradient */
  --primary-fill-hover:  var(--primary-hover);
  --on-primary:          var(--ink-invert); /* text on it */
  --primary-glow:        var(--shadow-sm);
  --secondary-edge:      var(--line-strong);
  --heading:             var(--ink);
  --figure:              var(--ink);        /* the one number that matters */
  --accent-cyan:         var(--cyan-700);
  --accent-violet:       var(--indigo-500);
  --accent-magenta:      #a21caf;
  --avatar-bg:           var(--indigo-100);
  --avatar-ink:          var(--indigo-800);
  --highlight-edge:      var(--indigo-200);
  --soft-edge-hover:     var(--indigo-300);
  --selection-bg:        var(--indigo-100);
  --auth-bg:
    radial-gradient(1100px 520px at 50% -10%, var(--indigo-700), transparent 70%),
    var(--indigo-800);

  --success: var(--green-500);  --success-bg: var(--green-50);  --success-ink: var(--green-700);
  --warning: var(--amber-500);  --warning-bg: var(--amber-50);  --warning-ink: var(--amber-700);
  --danger:  var(--red-500);    --danger-bg:  var(--red-50);    --danger-ink:  var(--red-700);
  /* Where the cyan lives in the light theme: informational panels and badges,
     darkened until each clears AA on the ground it sits on. */
  --info:    var(--cyan-700);   --info-bg:    var(--cyan-50);   --info-ink:    var(--cyan-800);

  /* Borders for the tinted panels above — a shade darker than the background,
     so an alert has an edge without shouting. */
  --success-line: var(--green-200);
  --warning-line: var(--amber-200);
  --danger-line:  var(--red-200);
  --info-line:    var(--cyan-200);

  /* ---- type ----
     A system stack: instant, familiar, and renders Indian names and the rupee
     sign correctly on every device without downloading anything. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  --text-xs:   0.75rem;    /* 12px — labels only */
  --text-sm:   0.875rem;   /* 14px — secondary */
  --text-base: 1rem;       /* 16px — body. Never smaller for parents. */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px — the one number that matters on a page */

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

  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* ---- spacing, on a 4px grid ---- */
  --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;

  /* ---- shape ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---- elevation. Kept subtle: a school record system should feel solid,
         not floaty. ---- */
  --shadow-sm: 0 1px 2px rgba(19, 28, 40, 0.06);
  --shadow:    0 2px 8px rgba(19, 28, 40, 0.08);
  --shadow-md: 0 6px 20px -6px rgba(19, 28, 40, 0.16);
  --shadow-lg: 0 16px 40px -12px rgba(19, 28, 40, 0.24);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --fast: 140ms;
  --normal: 220ms;
  --slow: 320ms;

  /* ---- layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --content-max: 1200px;

  /* Minimum size for anything a finger has to hit.  [KICKOFF 6.4] */
  --touch: 44px;

  --z-sticky: 100;
  --z-sidebar: 200;
  --z-overlay: 300;
  --z-toast: 400;

  /* The sign-in page's coloured band (assets/css/signin.css): indigo into
     electric blue, with soft circles of light across it. */
  --signin-band: linear-gradient(155deg, #3d0a8f 0%, #3423c9 55%, #2a4dff 100%);
  --signin-circle: rgba(255, 255, 255, 0.10);
  /* The bus map's credit line sits on the map pictures, which are light in
     either theme, so it is the same dark-on-light in both. */
  --map-credit-bg: #f2f4f8;
  --map-credit-ink: #333a45;
  /* …and so do the stops and the route drawn on them: a stop grey until the
     bus has reached it, green after, its number white on either. */
  --map-stop: #6b7280;
  --map-stop-reached: #0a7c3c;
  --map-stop-ink: #ffffff;
  --map-route: #2563eb;
  --signin-circle-strong: rgba(255, 255, 255, 0.16);
}

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --normal: 0ms; --slow: 0ms; }
}

/* ============================================================================
   DARK THEME

   ONLY THE ROLE TOKENS ARE REDEFINED. The raw scale above — indigo-600, cyan-500, grey-200
   and the rest — is the same in both themes; what changes is which of them a
   role points at. That is the whole reason the roles layer exists, and it means
   a dark theme is thirty lines rather than a second stylesheet nobody keeps in
   step.

   Two things are inverted rather than merely darkened, and both matter:

     - The accents get LIGHTER, not darker. A link in --indigo-600 on a near-black
       page reads at about 2:1, which is unreadable. On dark, --primary has to be
       a colour that works as TEXT.
     - --ink-invert therefore goes DARK. It only ever sits on a filled accent —
       a primary button, a danger button, a badge — and once the fill is light,
       the text on it has to be dark or the button disappears.

   Every pair here clears WCAG AA against the surface it is used on, and
   `npm run test:responsive` measures the rendered result rather than trusting
   this comment.  [KICKOFF 6.2, 6.4]
   ============================================================================ */

[data-theme="dark"] {
  /* Tells the browser to draw its own furniture dark too: scrollbars, date
     pickers, select drop-downs and the form controls we do not style. */
  color-scheme: dark;

  /* Deep black under midnight navy. The surfaces step up in lightness — sunk,
     page, card, raised — so depth reads without a drop shadow. */
  --bg:            #05070e;
  --surface:       #0b1122;
  --surface-alt:   #0f1730;
  --surface-sunk:  #070b18;

  --ink:           #f3f6ff;
  --ink-soft:      #c8d3ee;
  --ink-muted:     #94a3c6;    /* blue-grey; 7:1 on a card */
  --ink-invert:    #05070e;

  --line:          #1b2547;
  --line-strong:   #2a3868;

  /* Real house colours, lifted just enough to read on navy, each with a deep
     wash of the same hue. A red house is red here too. Never reuse the light
     values: they sink into the ground. */
  --house-green:   #4ade80;  --house-green-soft:  #0f2a1c;
  --house-red:     #ff6b6b;  --house-red-soft:    #3a1216;
  --house-yellow:  #facc15;  --house-yellow-soft: #33290a;
  --house-orange:  #fb923c;  --house-orange-soft: #36200d;
  --house-blue:    #60a5fa;  --house-blue-soft:   #0f2347;
  --house-purple:  #c084fc;  --house-purple-soft: #2a1644;
  --house-maroon:  #f07896;  --house-maroon-soft: #3d0f1d;
  --house-sky:     #38bdf8;  --house-sky-soft:    #0a2a3d;
  --house-pink:    #f472b6;  --house-pink-soft:   #3a1030;

  --cal-holiday:  #ff6b6b;  --cal-holiday-soft:  #3a1216;
  --cal-festival: #fb923c;  --cal-festival-soft: #3a2210;
  --cal-event:    #a78bfa;  --cal-event-soft:    #241a45;
  --cal-activity: #f472b6;  --cal-activity-soft: #3a1030;
  --cal-exam:     #fbbf24;  --cal-exam-soft:     #33280a;
  --cal-meeting:  #38bdf8;  --cal-meeting-soft:  #0a2a3d;
  --cal-term:     #4ade80;  --cal-term-soft:     #0f2a1c;

  --scroll-thumb:       #2a3868;
  --scroll-thumb-hover: #3d5096;
  --scroll-track:       transparent;

  /* Electric blue, light enough to read as text on a navy card (5.9:1). */
  --primary:       #5b8cff;
  --primary-hover: #86a9ff;
  --primary-soft:  #0f1c45;
  --primary-soft-2: #172a63;
  --primary-ring:  rgba(91, 140, 255, 0.45);

  /* Darker than the page, lit faintly from the top in blue and violet. */
  --sidebar-bg:    #060913;
  --sidebar-bg-image: linear-gradient(180deg, rgba(42, 77, 255, 0.12) 0%, rgba(139, 92, 246, 0.07) 55%, rgba(6, 9, 19, 0) 100%);
  --sidebar-ink:   #b6c3e6;
  --sidebar-active: #13204d;
  --sidebar-active-edge: #22d3ee;
  --sidebar-glow:  0 0 18px -6px rgba(34, 211, 238, 0.55);

  --success: #4ade80;  --success-bg: #0d2619;  --success-ink: #86efac;
  --warning: #fbbf24;  --warning-bg: #2b200a;  --warning-ink: #fcd34d;
  --danger:  #ff6b6b;  --danger-bg:  #2e0f14;  --danger-ink:  #ffa3a3;
  --info:    #22d3ee;  --info-bg:    #062a33;  --info-ink:    #8ff0ff;

  --success-line: #1a4a30;
  --warning-line: #4d3a10;
  --danger-line:  #5a1a22;
  --info-line:    #0b4a58;

  /* Ambient light: electric blue top-left, violet top-right, a breath of cyan
     from below. Faint — a page to work on, not a poster. */
  --bg-image:
    radial-gradient(1100px 560px at 8% -12%, rgba(42, 77, 255, 0.16), rgba(5, 7, 14, 0) 62%),
    radial-gradient(900px 520px at 100% -6%, rgba(139, 92, 246, 0.14), rgba(5, 7, 14, 0) 60%),
    radial-gradient(900px 480px at 50% 112%, rgba(0, 229, 255, 0.06), rgba(5, 7, 14, 0) 60%);

  --surface-glass: rgba(7, 11, 24, 0.82);
  --field-bg:      #070b18;
  --card-edge:     #1b2547;
  --card-shadow:   0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 34px -20px rgba(0, 0, 0, 0.9);
  --card-glow:     0 0 0 1px rgba(91, 140, 255, 0.22), 0 18px 40px -22px rgba(31, 107, 255, 0.55);

  /* The primary button: electric blue into deep cyan, white text. Every stop
     keeps white at 4.5:1 or better; the glow carries the brighter cyan. */
  --primary-fill:       linear-gradient(135deg, #2a4dff 0%, #1d63f0 55%, #0a78a8 100%);
  --primary-fill-hover: linear-gradient(135deg, #3a5cff 0%, #2c6ff5 55%, #0a7fb2 100%);
  --on-primary:         #ffffff;
  /* Under the gradient, and what contrast is measured against: the deep end
     of it, where white reads at 5.8:1. Never the light --primary above, which
     is a TEXT colour on dark and would leave white text at 3.2:1. */
  --primary-solid:      #2a4dff;
  --primary-glow:       0 0 0 1px rgba(91, 140, 255, 0.35), 0 8px 22px -8px rgba(31, 107, 255, 0.7), 0 0 20px -6px rgba(0, 229, 255, 0.4);
  --secondary-edge:     #3b3f8f;

  --heading:        #ffffff;
  --figure:         #22d3ee;     /* the numbers that matter, in cyan */
  --accent-cyan:    #22d3ee;
  --accent-violet:  #a78bfa;
  --accent-magenta: #f472d0;
  --avatar-bg:      #16255a;
  --avatar-ink:     #d6e2ff;
  --highlight-edge: #2f4a9a;
  --soft-edge-hover: #4d6bd6;
  --selection-bg:   #1f3a8a;
  /* The sign-in page: the same deep black and ambient light as the portal,
     a little stronger, because it is the first thing anybody sees. */
  --auth-bg:
    radial-gradient(900px 520px at 15% -10%, rgba(42, 77, 255, 0.30), rgba(5, 7, 14, 0) 60%),
    radial-gradient(800px 480px at 90% 0%, rgba(139, 92, 246, 0.24), rgba(5, 7, 14, 0) 60%),
    radial-gradient(760px 440px at 50% 115%, rgba(0, 229, 255, 0.12), rgba(5, 7, 14, 0) 60%),
    #05070e;

  /* A shadow tuned for white does nothing on a dark ground — depth there comes
     from a lighter surface and a visible edge, not from a drop shadow. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow:    0 4px 14px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);

  /* The sign-in band, deep navy into electric blue. */
  --signin-band: linear-gradient(155deg, #0a1240 0%, #12257a 55%, #1d3fd8 100%);
  --signin-circle: rgba(120, 160, 255, 0.10);
  --signin-circle-strong: rgba(120, 160, 255, 0.16);
}

/* ============================================================================
   ON PAPER

   Printing is its own medium, and the palette above is built for a screen. A
   reader on the dark theme pressing Print does not want a black page — and a
   browser that drops background colours, as most do by default, would give
   them white text on nothing at all.

   So paper gets its own roles: white ground, black ink, and grey rules that
   survive a cheap printer. Which parts of a page go to paper at all is in
   layout.css, under the same @media print.
   ============================================================================ */

@media print {
  :root, :root[data-theme="dark"] {
    --bg:            var(--white);
    --surface:       var(--white);
    --surface-alt:   var(--white);
    --surface-sunk:  var(--white);

    --ink:           #000000;
    --ink-soft:      var(--grey-800);
    --ink-muted:     var(--grey-700);
    --ink-invert:    #000000;

    --line:          var(--grey-400);
    --line-strong:   var(--grey-500);

    /* A heading printed in brand indigo comes out of a mono printer as a
       muddy grey. On paper it is simply ink. */
    --primary:       #000000;
    --primary-soft:  var(--white);
    --primary-hover: #000000;
  }
}