/* ── FONT IMPORT ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');

/* ── HERO ── */
/* 1. Global box model reset */
*, 
*::before, *::after {
    box-sizing: border-box;
}

/* =====================
   Design Tokens / Theme
   ===================== */
:root {
    --bg-page: #F4F4F9; /*Page Background*/
    --bg-page-secondary: #D0D0D0; /*Page Background*/
    --bg-main: #FBF8F2;              /* Overall page background (cream) */

    --bg-card: #ffff; /*Standard content containers(Prayer time cards (Dhuhr / Asr))*/
    --bg-card-secondary: #dad6d6; /*Standard content containers(Prayer time cards (Dhuhr / Asr))*/

    --bg-highlight: #EDE5DC; /*Jumuah prayer section background */
    /* --bg-primary: #7a7394; Header, footer background */
     --bg-primary: #4c4663; /*Header, footer background*/


    --text-primary: #101011; /*Main readable text(Dhuhr Times,Section titles,Dua headings)*/
    --text-secondary: #959597; /*Use when text is not the main focus.*/

    --accent-primary: #FFBA46; /*If the user should notice or click(Now,Register)*/
    --accent-secondary: #6FA0E3; /*(Next in asr section)*/
    --accent-live: #AD5047; /*Red = only when something is live or urgent(streaming)*/

    --border-soft: #878681; /*Borders should disappear visually, not demand attention.*/
}
@font-face {
    font-family: 'UthmanicHafs'; /*'UthmanicHafs', 'Amiri Quran', serif;*/
    src: url('../assets/fonts/UthmanicHafs1B.woff2') format('woff2');
    font-display: swap;
}
html {
  scroll-behavior: smooth;
}
body {
        margin: 0;
        /* background: var(--bg-main); */
        background-color: var(--bg-page);
        color: var(--text-primary);
        padding: 0;
        font-family: "inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
        /* opacity: 0;
        transition: opacity 0.3s ease-in; */
}
/* This class will be added by JS once everything is loaded
body.loaded {
    opacity: 1;
} */