/* ==========================================================================
   QURAN CIRCLES — Design Tokens
   Plain CSS custom properties. No abstractions.
   
   Light mode: :root (default)
   Dark mode:  [data-theme="dark"]
   
   CSS Logical Properties guidance:
   - Use margin-inline-start / margin-inline-end  instead of margin-left / margin-right
   - Use padding-inline / padding-block           instead of padding directional
   - Use inset-inline-start / inset-inline-end    instead of left / right
   - Use border-inline-start                      instead of border-left
   - Use text-align: start / end                  instead of left / right
   This ensures correct behavior in both LTR (English) and RTL (Arabic) contexts.
   ========================================================================== */


/* --------------------------------------------------------------------------
   @font-face — Unified font-family via unicode-range
   
   Both fonts are accessed as font-family: 'QC Serif'.
   The browser auto-selects the correct font file per character.
   
   Arabic: Uthman Taha (KFGQPC) — Regular 400, Bold 700
   Latin:  Libertinus Serif      — Regular 400, Bold 700, Italic 400, Bold Italic 700
   
   size-adjust on the Arabic face compensates for different metrics between
   the two fonts. Tune this value visually — start at 100% and adjust until
   Arabic and Latin text at the same font-size feel optically balanced.
   -------------------------------------------------------------------------- */

/* — Arabic: Uthman Taha Regular — */
@font-face {
  font-family: 'QC Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/UthmanTSVer1.ttf') format('truetype');
  unicode-range:
    U+0600-06FF,   /* Arabic                       */
    U+0750-077F,   /* Arabic Supplement             */
    U+08A0-08FF,   /* Arabic Extended-A             */
    U+FB50-FDFF,   /* Arabic Presentation Forms-A   */
    U+FE70-FEFF,   /* Arabic Presentation Forms-B   */
    U+0660-0669,   /* Arabic-Indic Digits           */
    U+06F0-06F9;   /* Extended Arabic-Indic Digits  */
  /* size-adjust: 100%; — tune visually */
}

/* — Arabic: Uthman Taha Bold — */
@font-face {
  font-family: 'QC Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/UthmanTSBVer1.ttf') format('truetype');
  unicode-range:
    U+0600-06FF,
    U+0750-077F,
    U+08A0-08FF,
    U+FB50-FDFF,
    U+FE70-FEFF,
    U+0660-0669,
    U+06F0-06F9;
  /* size-adjust: 100%; */
}

/* — Latin: Libertinus Serif Regular — */
@font-face {
  font-family: 'QC Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-400-normal.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-400-normal.woff') format('woff');
  unicode-range:
    U+0000-024F,   /* Latin, Latin Extended-A/B     */
    U+0300-036F,   /* Combining Diacritical Marks   */
    U+2000-206F,   /* General Punctuation           */
    U+20AC,        /* Euro Sign                     */
    U+2122,        /* Trademark                     */
    U+2190-21FF,   /* Arrows                        */
    U+2200-22FF;   /* Mathematical Operators         */
}

/* — Latin: Libertinus Serif Bold — */
@font-face {
  font-family: 'QC Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-700-normal.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-700-normal.woff') format('woff');
  unicode-range:
    U+0000-024F,
    U+0300-036F,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2190-21FF,
    U+2200-22FF;
}

/* — Latin: Libertinus Serif Italic — */
@font-face {
  font-family: 'QC Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-400-italic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-400-italic.woff') format('woff');
  unicode-range:
    U+0000-024F,
    U+0300-036F,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2190-21FF,
    U+2200-22FF;
}

/* — Latin: Libertinus Serif Bold Italic — */
@font-face {
  font-family: 'QC Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-700-italic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-serif@latest/latin-700-italic.woff') format('woff');
  unicode-range:
    U+0000-024F,
    U+0300-036F,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2190-21FF,
    U+2200-22FF;
}


/* ==========================================================================
   LIGHT MODE (default)
   ========================================================================== */

:root {

  /* — Font Family — */
  --font-family:          'QC Serif', Georgia, serif;

  /* — Font Sizes — */
  --font-size-small:      0.875rem;   /* 14px */
  --font-size-base:       1.0625rem;  /* 17px */
  --font-size-large:      1.375rem;   /* 22px */
  --font-size-heading:    2rem;       /* 32px */
  --font-size-display:    3rem;       /* 48px */

  /* — Font Weights — */
  --font-weight-regular:  400;
  --font-weight-bold:     700;

  /* — Line Heights — */
  --line-height-body:     1.6;
  --line-height-heading:  1.3;

  /* — Colors: Surfaces — */
  --color-bg:             #FAF9F7;
  --color-bg-secondary:   #FEF9EF;
  --color-bg-element:     #F0E5D8;

  /* — Colors: Text — */
  --color-text:           #171717;
  --color-text-secondary: #AC8C71;
  --color-text-muted:     #C4A890;

  /* — Colors: Accent — */
  --color-accent:         #A88366;

  /* — Colors: Borders — */
  --color-border:         #A88366;

  /* — Spacing — */
  --space-xs:             0.25rem;    /*  4px */
  --space-sm:             0.5rem;     /*  8px */
  --space-md:             1rem;       /* 16px */
  --space-lg:             2rem;       /* 32px */
  --space-xl:             3rem;       /* 48px */
  --space-2xl:            5rem;       /* 80px */

  /* — Border Radius — */
  --radius-none:          0;
  --radius-subtle:        0.25rem;
  --radius-round:         9999px;

  /* — Transitions — */
  --duration-short:       200ms;
  --duration-long:        400ms;
  --easing:               ease-in-out;
  --transition-short:     200ms ease-in-out;
  --transition-long:      400ms ease-in-out;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */

/* First-time visitors: respect OS preference when no explicit choice stored */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #171D2A;
    --color-bg-secondary:   #1E2538;
    --color-bg-element:     #283044;
    --color-text:           #E4E8EC;
    --color-text-secondary: #A5B0BF;
    --color-text-muted:     #7C8899;
    --color-accent:         #E4E8EC;
    --color-border:         #374560;
  }
}

[data-theme="dark"] {

  /* — Colors: Surfaces — */
  --color-bg:             #171D2A;
  --color-bg-secondary:   #1E2538;
  --color-bg-element:     #283044;

  /* — Colors: Text — */
  --color-text:           #E4E8EC;
  --color-text-secondary: #A5B0BF;
  --color-text-muted:     #7C8899;

  /* — Colors: Accent — */
  --color-accent:         #E4E8EC;

  /* — Colors: Borders — */
  --color-border:         #374560;
}