/* =====================================================================
   DESIGN TOKENS — the single source of truth for the brand.

   To apply a new brand / style kit:
     1. Change the values in this file (colors, fonts, radius, shadows…)
     2. Change fonts + logos in app/theme.php
     3. Check the result at /styleguide
   Components (app.css) and pages (app/Views) only ever use these
   variables — never hard-coded colors or sizes.
   See design/STYLE_GUIDE.md for the full workflow.
   ===================================================================== */

:root {
    /* ---- Brand — "Indigo Insight" (design/DESIGN.md) ------------------
       Deep-indigo navigation, near-white canvas, one violet for action,
       five muted tones that colour-code numbers by meaning.
       Every text/background pair is measured to WCAG AA (ratios in DESIGN.md). */
    --brand:            #1E1B4B;   /* primary-dark — dark buttons, tooltips, selected chips (16:1 with white) */
    --brand-700:        #2A2463;   /* hover / gradient end */
    --brand-500:        #4A3CD9;   /* primary-text — links, violet text & icons (7.1:1 on white) */
    --brand-100:        #E8E7F0;   /* soft borders, chips */
    --brand-50:         #EEEBFE;   /* primary-soft — id chips, hover, selected rows */
    --brand-contrast:   #ffffff;

    --accent:           #F5B83D;   /* rare highlights (stars) */
    --action:           #5B4CF0;   /* primary — the one key action of a screen (5.6:1 with white) */
    --action-hover:     #4A3CD9;
    --action-contrast:  #ffffff;

    /* ---- Meaning tones (tile bg / ink for icon & emphasis on that tone)
       indigo = people & totals · mint = good, money in · rose = money out, risk
       peach = needs action soon · sky = information, time.
       (variable names kept from the previous kit so views need no change) */
    --tone-violet:      #DDE4FC;   --tone-violet-ink: #3B4CC0;   /* indigo */
    --tone-pink:        #FBE3E6;   --tone-pink-ink:   #B42343;   /* rose */
    --tone-mint:        #DDEFE8;   --tone-mint-ink:   #17725A;
    --tone-yellow:      #FDEBD9;   --tone-yellow-ink: #9A4A0C;   /* peach */
    --tone-cyan:        #DCEBF3;   --tone-cyan-ink:   #1F6386;   /* sky */
    --tone-muted-text:  #5B5876;   /* secondary text on a tone (≥ 5.3:1 on all five) */

    /* ---- Neutrals --------------------------------------------------- */
    --bg:               #F6F6FA;   /* page */
    --surface:          #ffffff;   /* cards, inputs, menus */
    --surface-muted:    #F0EFF6;   /* segmented tracks, table header band, skeletons */
    --border:           #E8E7F0;
    --border-strong:    #D6D4E3;   /* inputs */
    --text:             #1E1B4B;   /* ink — 16:1 on white */
    --muted:            #6E6B88;   /* 5.1:1 on white, 4.7:1 on --bg — never on a tone */
    --muted-strong:     #5B5876;

    /* ---- Status (text/dot on white; bg = matching tone) -------------- */
    --success:          #15803D;   --success-bg:  #DDEFE8;
    --warning:          #C2410C;   --warning-bg:  #FDEBD9;
    --danger:           #DC2626;   --danger-bg:   #FBE3E6;
    --info:             #1F6386;   --info-bg:     #DCEBF3;

    /* ---- Domain colors ---------------------------------------------- */
    --present:          var(--success);   --present-bg: var(--success-bg);
    --absent:           var(--danger);    --absent-bg:  var(--danger-bg);
    --late:             var(--warning);   --late-bg:    var(--warning-bg);
    --girl:             #B42343;          --girl-bg:    #FBE3E6;
    --boy:              #3B4CC0;          --boy-bg:     #DDE4FC;
    --whatsapp:         #1fa855;          --whatsapp-hover: #178a45;

    /* Illustrated portraits (no photo): 3 skin / hair variants, picked per person */
    --pt-skin-1:        #F3D0B0;   --pt-skin-1-d: #E4B48E;   --pt-hair-1: #3A2A22;
    --pt-skin-2:        #E2B08A;   --pt-skin-2-d: #CF966C;   --pt-hair-2: #1F1A17;
    --pt-skin-3:        #C68F65;   --pt-skin-3-d: #B07A52;   --pt-hair-3: #5A3A24;

    /* Calendar event types — a categorical set (always shown with icon + label) */
    --ev-lesson:        #5B4CF0;
    --ev-trip:          #15803D;
    --ev-party:         #C2410C;
    --ev-meeting:       #1F6386;
    --ev-exam:          #B42343;
    --ev-other:         #6E6B88;
    --ev-holiday:       #A9A6BF;

    /* ---- Typography ------------------------------------------------- */
    --font-body:        'Readex Pro', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --font-heading:     var(--font-body);
    --font-size-root:   15px;
    --fw-normal:        400;
    --fw-medium:        500;
    --fw-semibold:      600;
    --fw-bold:          700;

    /* ---- Shape & elevation ------------------------------------------ */
    --radius-lg:        20px;      /* modals, sheets */
    --radius:           16px;      /* cards, KPI tiles */
    --radius-btn:       12px;      /* buttons, icon buttons, nav items */
    --radius-sm:        8px;       /* inputs, segmented items */
    --radius-pill:      999px;     /* badges, dots, avatars */
    --shadow-sm:        0 1px 2px rgba(30, 27, 75, .04);
    --shadow:           0 8px 24px rgba(30, 27, 75, .08);
    --shadow-lg:        0 24px 48px rgba(30, 27, 75, .18);
    --shadow-primary:   0 8px 20px rgba(91, 76, 240, .30);
    --focus-ring:       0 0 0 3px rgba(91, 76, 240, .35);

    /* ---- Layout ----------------------------------------------------- */
    --sidebar-w:        248px;
    --sidebar-bg:       #2A2463;   /* deep indigo */
    --sidebar-fg:       #C9C5E8;   /* 8.3:1 */
    --sidebar-fg-active:#ffffff;
    --sidebar-hover:    rgba(255, 255, 255, .06);
    --sidebar-active:   #3A3474;   /* sidebar-raised */
    --sidebar-indicator:transparent;
    --content-pad:      2rem;
    --hero-gradient:    linear-gradient(135deg, #2A2463 0%, #3A3474 100%);

    /* ---- Bootstrap bridge (do not edit — derived from tokens) ------- */
    --bs-body-font-family: var(--font-body);
    --bs-body-color:       var(--text);
    --bs-body-bg:          var(--bg);
    --bs-primary:          var(--brand);
    --bs-link-color:       var(--brand-500);
    --bs-link-hover-color: var(--brand);
    --bs-link-color-rgb:   74, 60, 217;   /* = --brand-500 (Bootstrap 5.3 reads the rgb form) */
    --bs-link-hover-color-rgb: 30, 27, 75; /* = --brand */
    --bs-primary-rgb:      30, 27, 75;
    --bs-info-rgb:         31, 99, 134;
    --bs-success-rgb:      21, 128, 61;
    --bs-danger-rgb:       220, 38, 38;
    --bs-warning-rgb:      194, 65, 12;
    --bs-border-color:     var(--border);
    --bs-border-radius:    var(--radius-sm);
}
@media (max-width: 991.98px) { :root { --content-pad: 1.5rem; } }