/* ==========================================================================
   Design tokens — Bahir Ki Khabar
   Built once, reused everywhere. Nothing below this file hard-codes a colour.
   Maps to: WordPress theme -> assets/css/tokens.css (enqueued first)
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --brand-500: #067A47;          /* primary brand green */
  --brand-600: #05673B;
  --brand-700: #034A2A;
  --brand-100: #E1F5EA;

  /* --- Section accents --------------------------------------------------
     One calm accent per section. Sections are told apart by colour + icon,
     never by a different visual style. Spec 6, "Visual & UX principles".   */
  --sec-scholarships: #7C3AED;
  --sec-scholarships-soft: #F3EDFF;
  --sec-local: #0D9488;
  --sec-local-soft: #DFF6F2;
  --sec-internships: #A16207;
  --sec-internships-soft: #FDF6DC;
  --sec-overseas: #2563EB;
  --sec-overseas-soft: #E6EEFE;
  --sec-visas: #EA580C;
  --sec-visas-soft: #FFEDE0;
  --sec-news: #E11D48;
  --sec-news-soft: #FFE8ED;

  /* --- Neutrals --------------------------------------------------------- */
  --bg:           #FFFFFF;
  --bg-subtle:    #F6F9F7;
  --bg-sunken:    #EBF1ED;
  --surface:      #FFFFFF;
  --surface-alt:  #F6F9F7;
  --border:       #E1E8E4;
  --border-strong:#C7D2CB;

  --text:         #12161C;
  --text-muted:   #5A6472;
  --text-faint:   #626B77; /* was #8992A1 — measured 2.96:1 against --bg-subtle, real AA failure for the 12px text it's used on; this passes 4.5:1+ */
  --text-on-accent:#FFFFFF;

  /* --- Status ----------------------------------------------------------- */
  --ok:      #087443;
  --ok-soft: #E3F5EC;
  --warn:      #B45309;
  --warn-soft: #FCF0E1;
  --danger:      #C0203B;
  --danger-soft: #FCE9EE;

  /* --- Typography ------------------------------------------------------- */
  --font-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Urdu face is loaded ONLY on /ur/ views. See spec 4.3. */
  --font-ur: "Gulzar", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  2.875rem;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.6;

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

  /* User-adjustable text scale (accessibility control, spec 6.7) */
  --text-scale: 1;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;

  /* --- Radii ------------------------------------------------------------ */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .06);
  --shadow-lg: 0 8px 28px rgba(16, 24, 40, .12);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 72px;
}

/* --- Dark mode ----------------------------------------------------------
   Three states to cover: an explicit light choice, an explicit dark choice,
   and no choice at all (the default), where only the OS setting decides.
   The media-query block and the [data-theme="dark"] block below carry the
   same palette and must be kept in sync.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-500: #2FA36B;
    --brand-600: #268F5C;
    --brand-100: #10281C;

    --sec-scholarships: #A78BFA;  --sec-scholarships-soft: #241C3B;
    --sec-local:        #2DD4BF;  --sec-local-soft:        #102E2B;
    --sec-internships:  #FACC15;  --sec-internships-soft:  #2B2410;
    --sec-overseas:     #7BA5FB;  --sec-overseas-soft:     #16233F;
    --sec-visas:        #F0A93B;  --sec-visas-soft:        #33240F;
    --sec-news:         #FB7185;  --sec-news-soft:         #331420;

    --bg:           #0D1117;
    --bg-subtle:    #12181F;
    --bg-sunken:    #0A0E13;
    --surface:      #161C24;
    --surface-alt:  #1C232C;
    --border:       #262E38;
    --border-strong:#39434F;

    --text:       #E8ECF1;
    --text-muted: #9BA6B4;
    --text-faint: #8794A8; /* was #6C7787 — measured 3.77:1 against --surface, real AA failure; this passes 4.5:1+ against every dark surface tone */
    --text-on-accent: #0D1117;

    --ok: #3FBE81;        --ok-soft: #10281C;
    --warn: #E9A23B;      --warn-soft: #2E2210;
    --danger: #F2647F;    --danger-soft: #331420;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .4);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --brand-500: #2FA36B;
  --brand-600: #268F5C;
  --brand-100: #10281C;

  --sec-scholarships: #A78BFA;  --sec-scholarships-soft: #241C3B;
  --sec-local:        #2DD4BF;  --sec-local-soft:        #102E2B;
  --sec-internships:  #FACC15;  --sec-internships-soft:  #2B2410;
  --sec-overseas:     #7BA5FB;  --sec-overseas-soft:     #16233F;
  --sec-visas:        #F0A93B;  --sec-visas-soft:        #33240F;
  --sec-news:         #FB7185;  --sec-news-soft:         #331420;

  --bg:           #0D1117;
  --bg-subtle:    #12181F;
  --bg-sunken:    #0A0E13;
  --surface:      #161C24;
  --surface-alt:  #1C232C;
  --border:       #262E38;
  --border-strong:#39434F;

  --text:       #E8ECF1;
  --text-muted: #9BA6B4;
  --text-faint: #8794A8; /* was #6C7787 — same real AA-contrast fix as the media-query block above */
  --text-on-accent: #0D1117;

  --ok: #3FBE81;        --ok-soft: #10281C;
  --warn: #E9A23B;      --warn-soft: #2E2210;
  --danger: #F2647F;    --danger-soft: #331420;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .4);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .55);
}

/* --- High contrast (accessibility control, spec 6.7) -------------------- */
:root[data-contrast="high"] {
  --text: #000000;
  --text-muted: #1F2733;
  --border: #6B7280;
  --border-strong: #374151;
  --bg-subtle: #FFFFFF;
  --surface-alt: #FFFFFF;
}
:root[data-theme="dark"][data-contrast="high"] {
  --text: #FFFFFF;
  --text-muted: #D6DDE6;
  --border: #7A8797;
  --border-strong: #A3AEBC;
}