/*
Theme Name: Al-Bayan
Theme URI: https://albayan-association.com
Author: Association Islamique Al-Bayan
Author URI: https://albayan-association.com
Description: Thème premium sur-mesure pour l'Association Islamique Al-Bayan — apprentissage du Coran, de la langue arabe et des sciences islamiques (Paris, France · Dakar, Sénégal). Direction artistique « Le Manuscrit » : encre profonde, filet or, calligraphie. Sécurisé (2FA email, CSP, hardening), performant (Core Web Vitals), accessible (WCAG 2.2 AA).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-bayan
Tags: custom-menu, featured-images, translation-ready, full-width-template, accessibility-ready, education
*/

/* ══════════════════════════════════════════════════════════════════════
   AL-BAYAN — SYSTÈME DE DESIGN « LE MANUSCRIT »
   Cascade layers : reset → tokens → base → layout → components → utilities
   ══════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, utilities;

/* ── LAYER: TOKENS ──────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Couleurs — palette « manuscrit » : encre nuit + or mat.
       Surchargées en live par le Customizer (voir inc/customizer.php → wp_head). */
    --bg:            oklch(0.15 0.028 175);   /* encre vert-nuit, presque noir */
    --bg-2:          oklch(0.12 0.024 175);
    --surface:       oklch(0.19 0.03 175);
    --surface-2:     oklch(0.23 0.03 175);
    --ink:           oklch(0.96 0.012 90);    /* texte principal — ivoire chaud */
    --ink-muted:     color-mix(in oklch, var(--ink) 60%, var(--bg));
    --gold:          oklch(0.78 0.13 85);     /* accent unique — or mat */
    --gold-strong:   oklch(from var(--gold) calc(l - 0.14) c h);
    --gold-soft:     color-mix(in oklch, var(--gold) 16%, transparent);
    --border:        color-mix(in oklch, var(--ink) 13%, transparent);
    --border-gold:   color-mix(in oklch, var(--gold) 35%, transparent);
    color-scheme: dark;

    /* Typographie — display latin (Fraunces), arabe (Aref Ruqaa / Amiri), corps (Inter) */
    --font-display: "Fraunces", "Cormorant Garamond", ui-serif, Georgia, serif;
    --font-arabic:  "Aref Ruqaa", "Amiri", "Traditional Arabic", serif;
    --font-arabic-body: "Amiri", "Traditional Arabic", serif;
    --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Échelle typographique fluide (ratio ~1.25) */
    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
    --step--1: clamp(0.85rem, 0.81rem + 0.20vw, 0.95rem);
    --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.15rem);
    --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 1.95rem);
    --step-3:  clamp(1.85rem, 1.55rem + 1.45vw, 2.75rem);
    --step-4:  clamp(2.40rem, 1.95rem + 2.25vw, 3.90rem);
    --step-5:  clamp(3.00rem, 2.30rem + 3.50vw, 5.60rem);
    --leading-tight: 1.08;
    --leading-snug:  1.28;
    --leading-body:  1.68;
    --tracking-display: -0.01em;
    --tracking-label: 0.22em;

    /* Rythme d'espacement */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1.15rem;
    --space-m:   1.75rem;
    --space-l:   2.75rem;
    --space-xl:  4.5rem;
    --space-2xl: 7rem;
    --space-3xl: 10.5rem;

    /* Mouvement */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 200ms;
    --dur-base: 380ms;
    --dur-slow: 780ms;
    --dur-signature: 2400ms;

    /* Formes & élévation */
    --radius-s: 2px;
    --radius: 6px;
    --shadow-1: 0 1px 2px oklch(0 0 0 / .3), 0 6px 20px oklch(0 0 0 / .22);
    --shadow-2: 0 12px 48px oklch(0 0 0 / .38);

    /* Grille */
    --measure: 62ch;
    --container: 1280px;
    --container-narrow: 860px;
    --gutter: clamp(1.25rem, 5vw, 5rem);
    --nav-h: 76px;
    --touch-min: 44px;
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-signature: 0ms; }
  }
}

/* ── LAYER: RESET ───────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html { -webkit-text-size-adjust: 100%; }
  * { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; }
  p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption {
    overflow-wrap: break-word; text-wrap: pretty;
  }
  h1, h2, h3 { text-wrap: balance; }
}

/* Voir assets/css/theme.css pour @layer base/layout/components/utilities (chargé après). */