/* ==========================================================================
   KMSS — THEME FILE
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE YOU NEED TO TOUCH TO RE-BRAND THE WHOLE SITE.
   Change a colour here and it updates every page, every button, every card.

   OFFICIAL KMSS BRAND COLOURS (taken from the logo artwork):
     Navy      #060f49   the primary colour — logo, hero, buttons, links
     Off-white #e4e5e5   the logo's light counterpart — used for tinted panels

   Two supporting colours are derived from those, used sparingly:
     Red   #c8102e   small highlights only (featured badges, accents)
     Gold  #c9992e   rare highlights (stars, "featured" markers)
   If you'd rather the site were navy-and-white only, set --accent and --gold
   to the same value as --brand and everything stays on-brand.
   ========================================================================== */

:root {
  /* ---- BRAND COLOURS -------------------------------------------------- */
  --brand:            #060f49;   /* KMSS navy. Buttons, links, highlights.       */
  --brand-dark:       #101d63;   /* Used for hover states on navy buttons.       */
  --brand-light:      #8d9ae0;   /* Light navy, for text/accents ON dark navy.   */
  --on-brand:         #ffffff;   /* Text colour that sits ON a navy button.      */
  --accent:           #c8102e;   /* Accent colour: badges, small highlights.     */
  --accent-soft:      #fdeaed;   /* Very light accent, for tinted backgrounds.   */
  --sand:             #e4e5e5;   /* KMSS off-white. Panels and dividers.         */
  --gold:             #c9992e;   /* Rare highlights: stars, "featured" tags.     */

  /* ---- KUWAIT FLAG ----------------------------------------------------- */
  /* The flag itself is drawn with its exact official colours in
     assets/img/kw-flag.svg and is deliberately NOT themed.
     This is only the soft green wash in the hero background — the flag's green
     lifted in brightness so it reads at all against the navy. */
  --kw-green:         #2ecc80;

  /* ---- INK & SURFACES (light mode) ------------------------------------ */
  --ink:              #0d1226;   /* Main text colour            */
  --ink-soft:         #4c5570;   /* Secondary text / paragraphs */
  --ink-faint:        #7c849c;   /* Captions, meta, timestamps  */
  --deep:             #060f49;   /* Always-dark panels (hero, call-to-action bands).
                                    This is the KMSS navy and stays dark in BOTH
                                    light and dark mode.                        */
  --deep-fg:          #e4e5e5;   /* The KMSS off-white. Text and buttons that sit
                                    ON the navy. Deliberately NOT redefined in
                                    dark mode — those panels are always navy.   */
  --surface:          #ffffff;   /* Page background             */
  --surface-2:        #f4f5f7;   /* Alternating section background */
  --surface-3:        #e4e5e5;   /* Cards on tinted sections (the brand off-white) */
  --line:             #dcdee4;   /* Borders and hairlines       */

  /* ---- TYPOGRAPHY ----------------------------------------------------- */
  /* Poppins is the closest free match to the geometric sans in the KMSS logo. */
  --font-en: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Poppins', var(--font-en);   /* Headings  */
  --font-body:    var(--font-en);              /* Body text */

  /* ---- SHAPE & DEPTH -------------------------------------------------- */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(6, 15, 73, .07), 0 2px 8px rgba(6, 15, 73, .06);
  --shadow:    0 4px 12px rgba(6, 15, 73, .08), 0 12px 32px rgba(6, 15, 73, .08);
  --shadow-lg: 0 8px 24px rgba(6, 15, 73, .12), 0 24px 64px rgba(6, 15, 73, .14);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  /* ---- LAYOUT --------------------------------------------------------- */
  --max: 1180px;              /* Max content width */
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 120px);
  --nav-h: 68px;

  /* ---- MOTION --------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .28s;
}

/* ==========================================================================
   DARK MODE — automatically follows the visitor's device setting,
   and can be toggled with the moon button in the navbar.
   The navy is lightened here so text and buttons stay readable on a dark page.
   ========================================================================== */
:root[data-theme="dark"] {
  --brand:       #7f8fe8;
  --brand-dark:  #98a5ee;
  --brand-light: #b9c2f4;
  --on-brand:    #060f49;
  --accent:      #ff6b81;
  --accent-soft: #3a1620;
  --sand:        #232a4d;
  --gold:        #dfb45c;

  --ink:         #eef0f8;
  --ink-soft:    #aab2cc;
  --ink-faint:   #7a83a3;
  --deep:        #040a2e;
  --surface:     #080c1e;
  --surface-2:   #0e1430;
  --surface-3:   #151c40;
  --line:        #232c55;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:       #7f8fe8;
    --brand-dark:  #98a5ee;
    --brand-light: #b9c2f4;
    --on-brand:    #060f49;
    --accent:      #ff6b81;
    --accent-soft: #3a1620;
    --sand:        #232a4d;
    --gold:        #dfb45c;

    --ink:         #eef0f8;
    --ink-soft:    #aab2cc;
    --ink-faint:   #7a83a3;
    --deep:        #040a2e;
    --surface:     #080c1e;
    --surface-2:   #0e1430;
    --surface-3:   #151c40;
    --line:        #232c55;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow:    0 4px 14px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  }
}

/* When the site is switched to Arabic, headings and body use the Arabic face. */
:root[lang="ar"] {
  --font-display: var(--font-ar);
  --font-body:    var(--font-ar);
}