/* ==========================================================================
   NOBO — shadcn theme: token layer
   --------------------------------------------------------------------------
   Every colour in components.css and plugins.css resolves through a token
   defined here. Nothing downstream declares a literal colour.

   Palette sampled from uploads/school_content/admin_logo/1.png:
     purple #832b6c (1204px)   green #7dbd42 (1120px)

   Contrast decides the roles:
     white on #832b6c = 8.3:1  (AAA) -> carries solid buttons
     white on #7dbd42 = 2.3:1  (fails) -> green is NEVER a solid button;
                                          it leads charts and marks accents
     #4d7d22 on white = 4.9:1  (AA)  -> green as text/icon

   COMPATIBILITY: no color-mix(), no CSS nesting, no oklch(). A meaningful
   share of students are on older Android WebView where those fail silently.
   Every value below is an explicit hex.
   ========================================================================== */

:root {
  /* -- neutrals -----------------------------------------------------------
     Biased slightly toward the brand purple rather than pure grey, so the
     chrome reads as chosen alongside the logo instead of inherited. */
  --ss-background:        #ffffff;
  --ss-foreground:        #17111a;
  --ss-card:              #ffffff;
  --ss-card-foreground:   #17111a;
  --ss-muted:             #f7f5f8;
  --ss-muted-foreground:  #6f6577;
  --ss-border:            #e8e4ea;
  --ss-input:             #e8e4ea;
  --ss-ring:              #832b6c;

  /* -- brand -------------------------------------------------------------- */
  --ss-primary:           #832b6c;
  --ss-primary-hover:     #6d2459;
  --ss-primary-foreground:#ffffff;
  --ss-primary-soft:      #f6ecf3;

  --ss-green:             #7dbd42;
  --ss-green-text:        #4d7d22;
  --ss-green-soft:        #f1f8e9;
  --ss-green-border:      #cfe3b4;

  /* -- surfaces ----------------------------------------------------------- */
  --ss-accent:            #f7f5f8;
  --ss-accent-foreground: #17111a;
  --ss-sidebar:           #faf9fb;
  --ss-sidebar-border:    #ebe7ed;
  --ss-sidebar-accent:    #f0e7f0;
  --ss-nav-active-fg:     #832b6c;
  --ss-stat-top:          #fbfafc;
  --ss-logo-chip:         transparent;
  --ss-logo-pad:          0;

  /* -- semantic -----------------------------------------------------------
     The brand green sits where a UI normally puts "success", so one green
     ramp serves both identity and success. Warning and danger carry the
     state load that has to be unmistakable. */
  --ss-success:           #4d7d22;
  --ss-success-bg:        #f1f8e9;
  --ss-success-border:    #cfe3b4;
  --ss-warning:           #b45309;
  --ss-warning-bg:        #fffbeb;
  --ss-warning-border:    #f4dfae;
  --ss-danger:            #c81e40;
  --ss-danger-foreground: #ffffff;
  --ss-danger-bg:         #fdf2f4;
  --ss-danger-border:     #f3c9d2;
  --ss-info:              #0f4c5c;
  --ss-info-bg:           #eef6f8;
  --ss-info-border:       #c2dde4;

  /* -- charts: brand green leads, brand purple second -------------------- */
  --ss-chart-1: #7dbd42;
  --ss-chart-2: #832b6c;
  --ss-chart-3: #fbbf24;
  --ss-chart-4: #0f4c5c;
  --ss-chart-5: #c470ab;

  /* -- shape and depth ---------------------------------------------------- */
  --ss-radius:    0.625rem;
  --ss-radius-sm: 0.5rem;
  --ss-radius-xs: 0.375rem;
  --ss-shadow:      0 1px 2px 0 rgba(23, 17, 26, 0.05);
  --ss-shadow-pop:  0 4px 16px -2px rgba(23, 17, 26, 0.12);
  --ss-overlay:     rgba(23, 17, 26, 0.45);

  /* -- type ---------------------------------------------------------------
     Inter when the device has it, otherwise the platform UI face. Costs
     zero bytes and no blocking network request, which matters more here
     than shipping the exact face. Android lands on Roboto. */
  --ss-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ss-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark mode is OPT-IN ONLY — deliberately not wired to prefers-color-scheme.
   -------------------------------------------------------------------------
   It arrives one way: the student presses the switch in the portal top bar
   (layout/student/header.php), which stores 'ss-theme' and stamps
   data-ss-theme on <html>; layout/theme_late.php reads it back before first
   paint.

   Not the OS. When this was wired to prefers-color-scheme it produced a
   broken half-and-half page — light sidebar over dark content — because the
   chrome took its colours from AdminLTE's skin-blue and from hardcoded
   light-theme values inline in the views. Phase 2 rebuilt the chrome and the
   main portal screens on these tokens, and dark now renders correctly on
   them; but the remaining views have not been walked one by one, so the OS
   still does not get to drag a student into dark unasked. Restore a
   @media (prefers-color-scheme: dark) guard only after that sweep. */

/* Dark: explicit choice, so the in-app toggle wins over the OS.

   SCREEN ONLY. On paper the dark palette is not a style choice, it is an
   unreadable page: printers do not lay down background colour by default, so
   a page printed in dark mode puts #f6f3f7 text on white paper and hands the
   student a blank fee statement. Scoping the overrides to screen means print
   falls back to the light values on bare :root above, with no second copy of
   the palette to keep in step. */
@media screen {

  :root[data-ss-theme="dark"] {
    --ss-background:        #0f0b11;
    --ss-foreground:        #f6f3f7;
    --ss-card:              #171219;
    --ss-card-foreground:   #f6f3f7;
    --ss-muted:             #211a24;
    --ss-muted-foreground:  #a89dae;
    --ss-border:            #2a222d;
    --ss-input:             #332a37;
    --ss-ring:              #c470ab;

    --ss-primary:           #a4468a;
    --ss-primary-hover:     #b8579c;
    --ss-primary-foreground:#ffffff;
    --ss-primary-soft:      #2a1a26;

    --ss-green:             #7dbd42;
    --ss-green-text:        #9ed46b;
    --ss-green-soft:        #1a2412;
    --ss-green-border:      #3a5227;

    --ss-accent:            #211a24;
    --ss-accent-foreground: #f6f3f7;
    --ss-sidebar:           #130e15;
    --ss-sidebar-border:    #241d27;
    --ss-sidebar-accent:    #2c2130;
    --ss-nav-active-fg:     #e0a5cf;
    --ss-stat-top:          #1b1520;
    --ss-logo-chip:         #ffffff;
    --ss-logo-pad:          5px 7px;

    --ss-success:           #9ed46b;
    --ss-success-bg:        #1a2412;
    --ss-success-border:    #3a5227;
    --ss-warning:           #fbbf24;
    --ss-warning-bg:        #2a1f07;
    --ss-warning-border:    #56430f;
    --ss-danger:            #f4738d;
    --ss-danger-foreground: #2a1116;
    --ss-danger-bg:         #2a1116;
    --ss-danger-border:     #5c2735;
    --ss-info:              #4a9fb5;
    --ss-info-bg:           #0e1f24;
    --ss-info-border:       #234b57;

    --ss-chart-1: #7dbd42;
    --ss-chart-2: #c470ab;
    --ss-chart-3: #fbbf24;
    --ss-chart-4: #4a9fb5;
    --ss-chart-5: #a4468a;

    --ss-shadow:     0 1px 2px 0 rgba(0, 0, 0, 0.45);
    --ss-shadow-pop: 0 4px 16px -2px rgba(0, 0, 0, 0.6);
    --ss-overlay:    rgba(0, 0, 0, 0.6);
  }
}