/* ==========================================================================
   Gold Academy — Design tokens
   All colours, type, spacing, radii and shadows live here.
   Dark mode only redefines the semantic tokens; components never hard-code colours.
   ========================================================================== */

/* ---------- Fonts: Cairo (same as hsacad.com), local Arabic + Latin subsets ---------- */
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cairo-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cairo-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cairo-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cairo-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/cairo-arabic-800.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cairo-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cairo-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cairo-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cairo-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/cairo-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---------- Brand palette (sampled from the logo) ---------- */
  --navy-950: #0a1426;
  --navy-900: #0f1b33;
  --navy-800: #172f55;   /* logo wordmark */
  --navy-700: #22406f;
  --navy-600: #31568f;
  --navy-100: #e6ebf3;
  --navy-50:  #f2f5f9;

  --gold-700: #7c5a14;   /* gold text on light surfaces (AA) */
  --gold-600: #b3862b;   /* logo dark gold */
  --gold-500: #c99a3e;
  --gold-400: #dcaf5a;   /* logo light gold */
  --gold-300: #e8c887;
  --gold-100: #f6ecd6;
  --gold-50:  #fbf6ec;

  --sand-50:  #faf8f4;
  --sand-100: #f3efe7;
  --sand-200: #e7e1d5;
  --sand-300: #d6cebe;

  --green-600: #1f7a4d;  --green-100: #e3f2ea;
  --red-600:   #b42318;  --red-100:   #fbe7e5;
  --amber-600: #a15c07;  --amber-100: #fdf0d9;

  /* ---------- Semantic tokens — light ---------- */
  --c-bg:          var(--sand-50);
  --c-surface:     #ffffff;
  --c-surface-2:   var(--sand-100);
  --c-surface-inv: var(--navy-900);
  --c-text:        #1a2233;
  --c-text-muted:  #586174;
  --c-text-soft:   #646c7e;   /* ≥4.5:1 on white and sand-100 */
  --c-text-inv:    #f4efe4;
  --c-heading:     var(--navy-800);
  --c-line:        var(--sand-200);
  --c-line-strong: var(--sand-300);
  --c-accent:      var(--gold-400);
  --c-accent-ink:  var(--gold-700);     /* gold used as text */
  --c-accent-soft: var(--gold-50);
  --c-primary:     var(--navy-800);
  --c-primary-hover: var(--navy-700);
  --c-focus:       var(--gold-700); /* ≥3:1 on light surfaces */
  --c-success: var(--green-600); --c-success-soft: var(--green-100);
  --c-danger:  var(--red-600);   --c-danger-soft:  var(--red-100);
  --c-warning: var(--amber-600); --c-warning-soft: var(--amber-100);

  /* ---------- Typography ---------- */
  --font-sans: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --fs-xs:  0.8125rem;   /* 13 */
  --fs-sm:  0.875rem;    /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:  1.125rem;    /* 18 */
  --fs-lg:  1.25rem;     /* 20 */
  --fs-xl:  1.5rem;      /* 24 */
  --fs-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --fs-3xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-display: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --lh-body: 1.75;
  --lh-tight: 1.35;

  /* ---------- Spacing (4px grid) ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;  --sp-20: 5rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* ---------- Shape & depth ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 27, 51, .06), 0 1px 1px rgba(15, 27, 51, .04);
  --shadow-md: 0 6px 18px -6px rgba(15, 27, 51, .14), 0 2px 4px rgba(15, 27, 51, .05);
  --shadow-lg: 0 22px 44px -18px rgba(15, 27, 51, .28);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .2s; --dur: .35s; --dur-slow: .6s;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --header-h: 80px;

  /* ---------- Bootstrap bridge ---------- */
  /* Bootstrap focus rings and "primary" accents use the brand gold, never Bootstrap blue */
  --bs-primary: var(--gold-500);
  --bs-primary-rgb: 201, 154, 62;
  --bs-focus-ring-color: rgba(201, 154, 62, .35);
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-text);
  --bs-border-color: var(--c-line);
  --bs-link-color: var(--c-primary);
  --bs-link-hover-color: var(--c-accent-ink);
  --bs-link-color-rgb: 23, 47, 85;
  --bs-link-hover-color-rgb: 124, 90, 20;

  color-scheme: light;
}

/* ---------- Dark theme (explicit choice) ---------- */
[data-bs-theme="dark"] {
  --c-bg:          #0b1426;
  --c-surface:     #111d35;
  --c-surface-2:   #16264a;
  --c-surface-inv: #070e1c;
  --c-text:        #e9e5dc;
  --c-text-muted:  #a9b2c3;
  --c-text-soft:   #8590a5;
  --c-text-inv:    #f4efe4;
  --c-heading:     #f4efe4;
  --c-line:        #22355a;
  --c-line-strong: #2e4470;
  --c-accent:      var(--gold-400);
  --c-accent-ink:  var(--gold-400);
  --c-accent-soft: rgba(220, 175, 90, .10);
  --c-focus:       var(--gold-400);
  --c-primary:     var(--gold-400);
  --c-primary-hover: var(--gold-300);
  --c-success: #4cc38a; --c-success-soft: rgba(76, 195, 138, .12);
  --c-danger:  #f07167; --c-danger-soft:  rgba(240, 113, 103, .12);
  --c-warning: #f1b44c; --c-warning-soft: rgba(241, 180, 76, .12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 48px -18px rgba(0, 0, 0, .7);

  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-text);
  --bs-border-color: var(--c-line);
  --bs-link-color: var(--gold-400);
  --bs-link-hover-color: var(--gold-300);
  --bs-link-color-rgb: 220, 175, 90;
  --bs-link-hover-color-rgb: 232, 200, 135;
  --bs-emphasis-color: #f4efe4;
  --bs-secondary-bg: var(--c-surface-2);
  --bs-tertiary-bg: var(--c-surface);

  color-scheme: dark;
}