/* =====================================================================
   Traincu / Taameena — design tokens
   Single source of truth for brand colour, type, spacing and elevation.

   Loaded FIRST, before main.css and style.css. Those two files keep their
   own :root blocks, but every value in them now aliases back to a token
   defined here — so existing rules like var(--tn-navy) or var(--sc) keep
   working and there is exactly one place to change the palette.

   Brand colours are sampled from the Taameena logo:
     #75418F  dominant purple (wordmark + lighter swoosh)
     #662D91  deep purple (bold swoosh)

   Contrast, measured against #FFFFFF:
     --t-brand        7.22   AAA for normal text
     --t-brand-deep   8.94   AAA
     --t-brand-hover  8.73   AAA
   ===================================================================== */

:root {

    /* ---- Brand ------------------------------------------------------ */
    --t-brand-wash:   #F7F4F8;   /* page washes, hover rows            */
    --t-brand-tint:   #D8CAE0;   /* borders, dividers on brand panels  */
    --t-brand-soft:   #B397C1;   /* DECORATIVE ONLY — 2.59 on white,
                                    never put text or icons on it      */
    --t-brand-mid:    #8A5EA0;   /* secondary fills/text — 5.01, AA    */
    --t-brand:        #75418F;   /* primary — the logo purple          */
    --t-brand-deep:   #662D91;   /* headings on brand, deep fills      */
    --t-brand-hover:  #65387B;   /* :hover on primary                  */
    --t-brand-active: #542F67;   /* :active / pressed                  */

    /* ---- Neutrals --------------------------------------------------- */
    --t-ink-deep:     #1A0A2E;   /* near-black, brand-tinted headings  */
    --t-ink:          #1A1A1A;   /* body text                          */
    --t-ink-2:        #444444;   /* secondary text                     */
    --t-ink-3:        #6B6B6B;   /* muted text, captions               */
    --t-line:         #E4E4E7;   /* borders, hairlines                 */
    --t-bg:           #FFFFFF;
    --t-bg-sub:       #F5F5F5;   /* subtle section backgrounds         */

    /* ---- Status ----------------------------------------------------- */
    --t-success:      #10B981;
    --t-warning:      #FFC700;
    --t-danger:       #DC2626;
    --t-info:         #1565C0;

    /* ---- Type ------------------------------------------------------- */
    /* Latin resolves to Plus Jakarta Sans; Arabic has no glyphs there,
       so it falls through to MOLarabic, the licensed brand face.        */
    --t-font: 'Plus Jakarta Sans', 'MOLarabicRegular', 'Segoe UI', -apple-system, sans-serif;

    --t-fs-xs:   12px;
    --t-fs-sm:   14px;
    --t-fs-md:   16px;
    --t-fs-lg:   20px;
    --t-fs-xl:   26px;
    --t-fs-2xl:  34px;
    --t-fs-3xl:  44px;

    --t-fw-regular: 400;
    --t-fw-medium:  500;
    --t-fw-semi:    600;
    --t-fw-bold:    700;

    --t-lh-tight:  1.2;
    --t-lh-body:   1.6;

    /* ---- Space — 4px base ------------------------------------------- */
    --t-1:  4px;
    --t-2:  8px;
    --t-3: 12px;
    --t-4: 16px;
    --t-5: 24px;
    --t-6: 32px;
    --t-7: 48px;
    --t-8: 64px;

    /* ---- Radius ----------------------------------------------------- */
    --t-r-sm:   8px;
    --t-r:     12px;
    --t-r-lg:  18px;
    --t-r-pill: 999px;

    /* ---- Elevation — tinted with the brand purple 117,65,143 -------- */
    --t-sh-1: 0 2px 12px rgba(117, 65, 143, .08);
    --t-sh-2: 0 6px 24px rgba(117, 65, 143, .12);
    --t-sh-3: 0 16px 48px rgba(117, 65, 143, .18);

    /* ---- Motion ----------------------------------------------------- */
    --t-t: .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --t-t: 0s; }
}