/* ═══════════════════════════════════════════════════════════════════
   BLUE OCEAN HUB — DESIGN TOKENS
   Single source of truth for every color in the site.
   No hex / rgb / hsl literal should live outside this file.
   Import this file before any other stylesheet (it is pulled in by
   Layout.css and Rtl/Layout.css via @import).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── PRIMARY BRAND — BLUE ────────────────────────────────────── */
    --brand-50:  rgba(72, 151, 255, 0.10);  /* Sky Blue 10% — hover wash       */
    --brand-100: rgba(72, 151, 255, 0.20);  /* Hover surface                   */
    --brand-300: #4897FF;                   /* Sky Blue — focus ring, links    */
    --brand-500: #0047AB;                   /* Royal Blue — primary buttons    */
    --brand-700: #0B1B6E;                   /* Navy — pressed, dark hero       */
    --brand-300-rgb: 72, 151, 255;          /* Channels of --brand-300         */
    --brand-500-rgb: 0, 71, 171;            /* Channels of --brand-500         */
    --brand-700-rgb: 11, 27, 110;           /* Channels of --brand-700         */
    --brand-gradient: linear-gradient(135deg, #96EAE8 0%, #0047AB 100%);

    /* Top-of-page scrim laid over the hero so STATE A nav passes AA.
       Height is split into a variable so the Arabic build can extend it —
       the Arabic title wraps to two lines and a 120px stop ends inside the
       eyebrow chip, darkening only its top half. */
    --scrim-on-hero-height: 120px;
    --scrim-on-hero: linear-gradient(to bottom, rgba(var(--brand-700-rgb), 0.55), transparent var(--scrim-on-hero-height));

    /* Frosted-nav surface in STATE B (paired @supports fallback below). */
    --nav-surface:          rgba(255, 255, 255, 0.82);
    --nav-surface-fallback: rgba(255, 255, 255, 0.96);
    --nav-shadow:           0 4px 20px -8px rgba(25, 25, 53, 0.12);

    /* ── ACCENT — TEAL ───────────────────────────────────────────── */
    --accent-300: #96EAE8;                  /* Mint — light accent chips       */
    --accent-500: #009A9E;                  /* Teal — success status           */
    --accent-700: #013538;                  /* Deep teal — accent pressed      */

    /* ── NEUTRALS (LIGHT) ────────────────────────────────────────── */
    --color-bg:            #FFFFFF;
    --color-surface:       #F6F7F9;
    --color-surface-2:     #ECEEF1;
    --color-border:        #DCDCDC;
    --color-border-strong: #B2B2B4;
    --color-text:          #191935;         /* brand Indigo — body type        */
    --color-text-muted:    #707070;
    --color-text-subtle:   #9F9FA3;

    /* ── SEMANTIC ────────────────────────────────────────────────── */
    --success: var(--accent-500);           /* per rule 5 — success → teal     */
    --error:   #E53935;
    --warning: #F39C12;
    --info:    var(--brand-300);

    /* WhatsApp brand color — accessible variant per WhatsApp brand guidelines.
       Off-palette by design: kept here so no inline hex leaks into views. */
    --brand-whatsapp: #128C7E;

    /* Star/rating yellow — shared across stats-strip + rating-chip + review marks.
       Off-palette by design (no equivalent gold in Blue Ocean); centralised so
       no inline hex leaks. */
    --rating-star: #F5C542;

    /* ── LEGACY ALIASES — DO NOT ADD NEW USAGE ───────────────────── */
    /* Existing CSS consumes these names. They now resolve to the
       canonical Blue Ocean tokens above — keep them only so a single
       PR can land without sweeping every var(--navy) reference. */
    --navy:               var(--brand-700);
    --navy-dark:          var(--color-text);
    --blue:               var(--brand-500);
    --blue-light:         var(--brand-300);
    --blue-pale:          var(--accent-300);

    /* Off-palette aliases redirected to in-palette tokens so landing pages
       and components that still reference these names render with the
       Blue Ocean palette instead of stray warm hex values. Sub-brands
       still override --brand-* below for their own tinting. */
    --accent-red:         var(--error);
    --accent-red-dark:    var(--error);
    --accent-gold:        var(--warning);
    --accent-gold-dark:   var(--warning);
    --accent-cream:       var(--accent-300);
    --accent-teal:        var(--accent-500);
    --accent-teal-dark:   var(--accent-700);
    --accent-teal-light:  var(--accent-300);
    --accent-purple:      var(--brand-500);
    --accent-purple-light:var(--brand-300);
    --accent-coral:       var(--brand-300);

    --grad-brand:    var(--brand-gradient);
    --grad-brand-r:  linear-gradient(225deg, #96EAE8 0%, #0047AB 100%);
    --grad-wave-warm: linear-gradient(90deg, var(--accent-red) 0%, var(--brand-700) 50%, var(--brand-500) 100%);
    --grad-wave-cool: linear-gradient(90deg, var(--brand-300) 0%, var(--brand-500) 50%, var(--brand-700) 100%);

    --bg-page:   var(--color-bg);
    --bg-alt:    var(--color-surface);
    --bg-muted:  var(--color-surface-2);
    --bg-dark:   var(--brand-700);

    --text-1:    var(--color-text);
    --text-2:    #44475A;                   /* legacy body — close to text   */
    --text-3:    var(--color-text-muted);
    --text-4:    var(--color-text-subtle);
    --text-inv:  var(--color-bg);

    --border:       var(--color-border);
    --border-focus: var(--brand-300);       /* focus ring per rule 2          */

    /* ── Typography ──────────────────────────────────────────────── */
    --font-en:  'Roboto', 'Montserrat', sans-serif;
    --font-ar:  'Cairo', sans-serif;

    --text-xs:   0.72rem;
    --text-sm:   0.82rem;
    --text-base: 0.95rem;
    --text-md:   1.05rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.75rem;
    --text-4xl:  3.6rem;

    --lh-tight:   1.15;
    --lh-snug:    1.35;
    --lh-normal:  1.6;
    --lh-relaxed: 1.8;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;
    --fw-black:  900;

    /* ── Spacing (4-pt grid) ─────────────────────────────────────── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* ── Border-radius ───────────────────────────────────────────── */
    --r-sm:   6px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 9999px;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 3px rgba(47,63,128,0.07);
    --shadow-sm: 0 2px 8px rgba(47,63,128,0.09);
    --shadow:    0 4px 20px rgba(47,63,128,0.11);
    --shadow-lg: 0 8px 36px rgba(47,63,128,0.14);
    --shadow-xl: 0 16px 56px rgba(47,63,128,0.18);

    /* ── Transitions ─────────────────────────────────────────────── */
    --t-fast:  0.15s ease;
    --t-base:  0.25s ease;
    --t-slow:  0.4s ease;

    /* ── Z-index ─────────────────────────────────────────────────── */
    --z-nav:    1000;
    --z-modal:  1050;
    --z-toast:  1100;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME (opt-in via <html data-theme="dark">)
   The script in _Layout.cshtml applies this attribute before paint
   so the dark palette renders flash-free.
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --color-bg:            #0A0A1F;
    --color-surface:       #13132E;
    --color-surface-2:     #1B1B3A;
    --color-border:        #2A2A50;
    --color-border-strong: #3B3B66;
    --color-text:          #EDEDF5;
    --color-text-muted:    #9C9CB8;
    --color-text-subtle:   #6E6E8C;

    --nav-surface:          rgba(10, 10, 31, 0.82);
    --nav-surface-fallback: rgba(10, 10, 31, 0.96);
    --nav-shadow:           0 4px 20px -8px rgba(0, 0, 0, 0.45);

    /* Legacy alias overrides so existing rules pick up dark surfaces. */
    --bg-page:   var(--color-bg);
    --bg-alt:    var(--color-surface);
    --bg-muted:  var(--color-surface-2);
    --bg-dark:   var(--brand-700);
    --text-1:    var(--color-text);
    --text-2:    #CFD2EE;
    --text-3:    var(--color-text-muted);
    --text-4:    var(--color-text-subtle);
    --border:    var(--color-border);
}

/* Honour OS preference when the user has not explicitly chosen a theme. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:            #0A0A1F;
        --color-surface:       #13132E;
        --color-surface-2:     #1B1B3A;
        --color-border:        #2A2A50;
        --color-border-strong: #3B3B66;
        --color-text:          #EDEDF5;
        --color-text-muted:    #9C9CB8;
        --color-text-subtle:   #6E6E8C;

        --nav-surface:          rgba(10, 10, 31, 0.82);
        --nav-surface-fallback: rgba(10, 10, 31, 0.96);
        --nav-shadow:           0 4px 20px -8px rgba(0, 0, 0, 0.45);

        --bg-page:   var(--color-bg);
        --bg-alt:    var(--color-surface);
        --bg-muted:  var(--color-surface-2);
        --bg-dark:   var(--brand-700);
        --text-1:    var(--color-text);
        --text-2:    #CFD2EE;
        --text-3:    var(--color-text-muted);
        --text-4:    var(--color-text-subtle);
        --border:    var(--color-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SUB-BRANDS — opt in by setting <body data-brand="…"> on a page.
   These keep the canonical token names but swap the underlying hex
   so sub-brand pages get a tinted palette without duplicating CSS.
   ═══════════════════════════════════════════════════════════════════ */
[data-brand="business"] {
    --brand-700: #2A2455;
    --brand-500: #3C3372;
    --brand-300: #9075D3;
    --accent-300: #B6A2E5;
    /* Without this override the hero gradient stays Blue Ocean teal→royal,
       so the focus ring + links sit inside a mismatched hero. */
    --brand-gradient: linear-gradient(135deg, #B6A2E5 0%, #3C3372 100%);
}
[data-brand="student"] {
    --brand-700: #002224;
    --brand-500: #013538;
    --brand-300: #009A9E;
    --accent-300: #96EAE8;
    --brand-gradient: linear-gradient(135deg, #96EAE8 0%, #013538 100%);
}
[data-brand="ladys"] {
    --brand-700: #2A2455;
    --brand-500: #3C3372;
    --brand-300: #FF7D7D;
    --accent-300: #FFB5B5;
    --brand-gradient: linear-gradient(135deg, #FFB5B5 0%, #3C3372 100%);
}