/* tokens.css — canonical design tokens for ACHAT Campus.
   Loaded BEFORE every other stylesheet (see layout.php) so every rule
   can read from var(--…). Light mode is :root; dark mode adds the
   html[data-theme="dark"] override layer.

   Phase A.1 introduces this file but theme.css still controls the
   visible dark-mode look for now — A.1 Commit 5 collapses theme.css
   onto these tokens and turns on glassmorphism. Visual change in
   Commit 1 is intentionally near-zero: this is foundation, not a
   re-skin. Two-hex changes here propagate everywhere downstream.

   Performance budget reminder ([ROADMAP.md] Performance budget):
   - No web fonts. System stack only.
   - --blur-amount is a knob: dial it from 12px → 4px → 0 if a 2017
     Android stutters on backdrop-filter. Glass is dark-mode only.
*/

:root {
    /* Surfaces */
    --bg:              #fbf9ff;
    --surface:         #ffffff;
    --surface-elev:    #ffffff;
    --border:          #eadff8;

    /* Text */
    --text:            #241438;
    --text-muted:      #625276;
    --text-on-accent:  #ffffff;

    /* Brand accents */
    --accent:          #6f35d4;   /* primary purple, unchanged from today */
    --accent-dark:     #5b28b8;
    --accent-pale:     #efe5ff;
    --accent-2:        #00b8d4;   /* NEW — cool cyan, used sparingly */
    --accent-hot:      #ff2e9a;   /* NEW — neon pink, hero punctuation only */

    /* Semantic alert tokens — kept aligned with today's hex codes so the
       error/warning/success surfaces don't shift in Commit 1. */
    --danger:          #cc0000;
    --danger-bg:       #fff0f0;
    --danger-border:   #f5b5b5;
    --warning:         #92400e;
    --warning-bg:      #fef3c7;
    --success:         #16a34a;
    --success-bg:      #dcfce7;

    /* Effects */
    --shadow-card:     0 10px 24px rgba(80, 45, 130, 0.07);
    --shadow-glow:     0 0 24px rgba(111, 53, 212, 0.22);
    --blur-amount:     10px;

    /* Category badge palette — semantic, NOT brand. Light/dark share
       the same values; vivid foregrounds read on both backgrounds. */
    --cat-food-bg:      #ffedd5;  --cat-food-fg:      #ea580c;
    --cat-academic-bg:  #dcfce7;  --cat-academic-fg:  #16a34a;
    --cat-services-bg:  #dbeafe;  --cat-services-fg:  #2563eb;
    --cat-lifestyle-bg: #fce7f3;  --cat-lifestyle-fg: #db2777;

    /* Background for image containers before/without an image. */
    --image-placeholder: #f4f0fb;

    /* Endpoint colour for the top-and-bottom stops of the page-body
       linear gradients used by landing / listings / listing-detail /
       bulletin / auth. Must darken in dark mode or the stops show
       as bright bands. */
    --bg-edge: #ffffff;

    /* Top-right radial-accent colour on the same pages. In dark mode
       must be a soft purple-with-alpha or it shows as a bright spot. */
    --bg-radial: #eadcff;
}

html[data-theme="dark"] {
    /* Surfaces — dark cyberpunk base. --surface and --surface-elev are
       semi-transparent so glassmorphism works when backdrop-filter is
       supported; @supports fallbacks (in app.css / theme.css) provide
       solid colors for old engines that don't paint it. */
    --bg:              #0f0820;
    --surface:         rgba(40, 30, 70, 0.55);
    --surface-elev:    rgba(55, 40, 90, 0.78);
    --border:          #382c52;

    /* Text — slightly cool to read well against the purple-indigo bg. */
    --text:            #ece7f5;
    --text-muted:      #a79dbf;
    --text-on-accent:  #ffffff;

    /* Brand accents — brighter purple for contrast on dark; cyan and
       magenta turn up the cyberpunk dial without being clownish. */
    --accent:          #a880ff;
    --accent-dark:     #845ae6;
    --accent-pale:     #2c2244;
    --accent-2:        #00f0ff;
    --accent-hot:      #ff3eb5;

    /* Alert surfaces — readable on dark, modeled on existing theme.css. */
    --danger:          #ff9b9b;
    --danger-bg:       #3a1d22;
    --danger-border:   #5e2b30;
    --warning:         #fcd34d;
    --warning-bg:      #3a2e15;
    --success:         #7ee2a4;
    --success-bg:      #0f3a23;

    --shadow-card:     0 12px 28px rgba(0, 0, 0, 0.5);
    --shadow-glow:     0 0 28px rgba(168, 128, 255, 0.40);
    --blur-amount:     12px;

    --image-placeholder: #2b2240;
    --bg-edge: #0f0820;
    --bg-radial: rgba(168, 128, 255, 0.16);
}