/* =========================================================================
   Sunnah Design Tokens
   Single source of truth for colors, typography scale, and spacing.
   Any change to brand values should happen here — not in additional-css.css.
   ========================================================================= */

/* ---- Inter variable font (self-hosted) ---------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url('/wp-content/themes/charitian-child/assets/fonts/inter/Inter.var.woff2') format('woff2-variations'),
         url('/wp-content/themes/charitian-child/assets/fonts/inter/Inter.var.woff2') format('woff2');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: optional;
    src: url('/wp-content/themes/charitian-child/assets/fonts/inter/Inter-Italic.var.woff2') format('woff2-variations'),
         url('/wp-content/themes/charitian-child/assets/fonts/inter/Inter-Italic.var.woff2') format('woff2');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

:root {
    /* ---- Font stack --------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---- Brand colors ------------------------------------------------- */
    --color-navy:    #182844;   /* primary  — headings, body, borders */
    --color-magenta: #E0034B;   /* accent   — CTAs, links, highlights */
    --color-teal:    #009191;   /* secondary accent — Gift Aid, Sadaqah */

    /* Neutrals retained from current palette */
    --color-bg-light:   #F0F3F4;
    --color-text-muted: #6A8695;
    --color-border:     #8494A7;
    --color-white:      #FFFFFF;

    /* Legacy aliases — additional-css.css still references these in-line */
    --sa-teal: var(--color-teal);

    /* ---- Type scale — DESKTOP ---------------------------------------- */
    --fs-h1:         56px;
    --fs-h2:         40px;
    --fs-h3:         36px;
    --fs-h4:         32px;
    --fs-h5:         28px;
    --fs-h6:         24px;
    --fs-body:       20px;  /* generous body for charity audience */
    --fs-body-dense: 16px;  /* cart, tables, dense UI */
    --fs-button:     16px;
    --fs-input:      18px;
    --fs-label:      14px;
    --fs-meta:       14px;
    --fs-small:      12px;

    /* ---- Font weights ------------------------------------------------- */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ---- Line heights ------------------------------------------------- */
    --lh-tight:   1.1;
    --lh-snug:    1.2;
    --lh-normal:  1.4;
    --lh-relaxed: 1.6;

    /* ---- Letter spacing ---------------------------------------------- */
    --ls-tighter: -0.02em;
    --ls-tight:   -0.01em;
    --ls-normal:  0;
    --ls-wide:    0.02em;
    --ls-wider:   0.03em;
}

/* ---- Type scale — MOBILE (≤768px) --------------------------------------- */
@media (max-width: 768px) {
    :root {
        --fs-h1:         32px;
        --fs-h2:         28px;
        --fs-h3:         24px;
        --fs-h4:         22px;
        --fs-h5:         18px;
        --fs-h6:         16px;
        --fs-body:       16px;  /* also prevents iOS input zoom */
        --fs-body-dense: 15px;
        --fs-button:     15px;
        --fs-input:      16px;  /* MUST stay ≥16px (iOS zoom) */
        --fs-label:      13px;
        --fs-meta:       12px;
        --fs-small:      11px;
    }
}

/* =========================================================================
   Base typography — site-wide defaults
   Applied as low-specificity rules so additional-css.css can override.
   ========================================================================= */

html {
    font-family: var(--font-sans);
}

body,
p, li, a, span, div, label, input, select, textarea, button,
.elementor-widget-container,
.woocommerce, .woocommerce *,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
}

body {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-navy);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);     line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.25;            letter-spacing: var(--ls-tight); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.3; }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: 1.35; }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }

/* Form inputs — 16px min on mobile is non-negotiable (iOS zoom) */
input, select, textarea {
    font-size: var(--fs-input);
    line-height: 1.5;
}

/* =========================================================================
   Brand enforcement cascade — Inter on everything except icon fonts.
   High-specificity :not() wildcard so it beats parent theme's rules
   regardless of selector (e.g. `.header-right a.header-btn`).
   Inline style="font-family:..." attributes are stripped by DB search-replace
   in the migration; they aren't covered here.
   ========================================================================= */
html body,
html body *:not([class^="fa-"]):not([class*=" fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fass):not(.fasr):not(.ti):not(.themify):not(.eicon):not([class^="eicon-"]):not([class*=" eicon-"]):not(.dashicons):not([class^="dashicons-"]):not([class*=" dashicons-"]):not([class^="swiper-icon"]):not(i) {
    font-family: var(--font-sans) !important;
}

/* Icon fonts: do NOT override — their CSS (font-awesome, elementor-icons,
   themify, dashicons) declares font-family on the element itself, and
   ::before pseudo inherits from the element. Any override here breaks icons. */

/* Parent theme brand-color override — force magenta on the header Quick Donate
   button. Do NOT override size/weight — the parent rule fixes height to 45px
   and our original font-size blows out the container. Inherit Inter via the
   wildcard rule above. */
body .header-btn,
body a.header-btn {
    background-color: var(--color-magenta) !important;
    color: var(--color-white) !important;
}