/* ============================================================
   ATTAI — Global Design Tokens (v2)
   Single source of truth for all brand values.
   Loaded on every page (priority 20, before all page CSS).

   BRAND PALETTE (7 canonical colors — do not add others):
     --color-primary-dark     #393968   navy
     --color-primary          #444794   indigo
     --color-secondary        #524c9f   purple
     --color-secondary-light  #8065ab   soft violet
     --color-accent           #a8812d   amber / gold
     --color-bg-light         #e3dff4   pale lavender
     --color-white            #ffffff

   STATUS COLORS (e-commerce UX only — NOT brand colors):
     --status-success / -dark
     --status-danger  / -dark
     --status-warning
     --status-whatsapp / -dark
   ============================================================ */

:root {
	/* ── Brand Primitives (canonical names) ────────────────── */
	--color-primary-dark:    #393968;   /* navy: headings, navbar, footer       */
	--color-primary:         #444794;   /* indigo: buttons, links, badges       */
	--color-secondary:       #524c9f;   /* purple: secondary borders, accents   */
	--color-secondary-light: #8065ab;   /* soft violet: muted text, soft icons  */
	--color-accent:          #ffffff;   /* accent: white                        */
	--color-bg-light:        #e3dff4;   /* pale lavender: surfaces, soft bg     */
	--color-white:           #ffffff;   /* cards, modals, inputs                */

	/* ── Backwards-compatible brand aliases ────────────────── */
	/* Existing CSS uses these names everywhere; keep them as   */
	/* aliases so no page-CSS file needs to be renamed.         */
	--color-navy:    var(--color-primary-dark);    /* alias                  */
	--color-indigo:  var(--color-primary);         /* alias                  */
	--color-purple:  var(--color-secondary);       /* alias                  */
	--color-soft:    var(--color-secondary-light); /* alias                  */
	--color-pale:    var(--color-bg-light);        /* alias                  */
	--color-gold:    var(--color-accent);          /* was #b8941a — NOW #a8812d */
	--color-violet:  var(--color-accent);          /* legacy alias           */

	/* ── Semantic Text Tokens (canonical) ──────────────────── */
	--text-main:       var(--color-primary-dark);    /* #393968 */
	--text-muted:      var(--color-secondary-light); /* #8065ab */
	--text-inverse:    var(--color-white);           /* #ffffff */
	--text-accent:     var(--color-accent);          /* #a8812d */
	--text-link:       var(--color-primary);         /* #444794 */
	--text-link-hover: var(--color-primary-dark);    /* #393968 */

	/* ── Old text token names — aliased for backwards compat ── */
	--text-primary:    var(--text-main);    /* was #1a1a2e — now #393968 */
	--text-secondary:  var(--text-muted);   /* was #4a4a6a — now #8065ab */

	/* ── Semantic Background Tokens ────────────────────────── */
	--bg-main:    var(--color-white);        /* page background          */
	--bg-section: var(--color-bg-light);     /* alternate section bg     */
	--bg-card:    var(--color-white);        /* cards, modals            */
	--bg-dark:    var(--color-primary-dark); /* navbar, footer, dark UI  */

	/* ── Button Tokens ─────────────────────────────────────── */
	--btn-primary:       var(--color-primary);
	--btn-primary-hover: var(--color-primary-dark);
	--btn-secondary:     var(--color-secondary-light);
	--btn-accent:        var(--color-accent);

	/* ── Border Tokens ─────────────────────────────────────── */
	--border-light:  var(--color-bg-light);              /* soft surfaces  */
	--border-strong: var(--color-secondary);             /* emphatic       */
	--border-subtle: rgba(57, 57, 104, 0.12);            /* fine dividers  */

	/* ── Status / E-commerce Tokens (NOT brand colors) ─────── */
	/* Required for accessible UX — stock indicators, alerts.   */
	--status-success:       #22c55e;   /* in-stock, success                */
	--status-success-dark:  #166534;   /* dark green for text on light bg  */
	--status-danger:        #ef4444;   /* out-of-stock, error              */
	--status-danger-dark:   #991b1b;   /* dark red for text on light bg    */
	--status-warning:       #d98000;   /* backorder, low-stock warning     */
	--status-whatsapp:      #25d366;   /* WhatsApp brand                   */
	--status-whatsapp-dark: #128c7e;   /* WhatsApp brand hover             */
	--status-error-bg:      #fde8e8;   /* light error background tint      */

	/* ── Backwards-compatible status aliases ───────────────── */
	--color-stock-in:  var(--status-success);
	--color-stock-out: var(--status-danger);
	--color-warning:   var(--status-warning);
	--color-whatsapp:  var(--status-whatsapp);
	--color-error-bg:  var(--status-error-bg);

	/* ── Typography ────────────────────────────────────────── */
	--font-primary:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display:  'Cormorant Garamond', Georgia, serif;
	--font-arabic:   'Cairo', 'GE SS Two', Arial, sans-serif;
	--font-english:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* --font-base is injected per-language via attai_output_lang_css_vars()   */
	/* in inc/multilingual.php at wp_head priority 8. Falls back to --font-primary. */
	--font-base:     var(--font-primary);

	/* ── Typography Scale ──────────────────────────────────── */
	--fs-xs:    0.75rem;   /* 12px */
	--fs-sm:    0.85rem;   /* 13.6px */
	--fs-base:  0.95rem;   /* 15.2px */
	--fs-lg:    1.1rem;    /* 17.6px */
	--fs-xl:    1.25rem;   /* 20px */
	--fs-2xl:   1.5rem;    /* 24px */
	--lh-tight: 1.3;
	--lh-base:  1.5;
	--lh-loose: 1.7;

	/* ── Shared Radius Scale ───────────────────────────────── */
	--r-xs:   6px;
	--r-sm:   10px;
	--r-md:   14px;
	--r-lg:   20px;
	--r-xl:   28px;
	--r-full: 9999px;

	/* ── Shared Shadow Scale (navy-tinted) ─────────────────── */
	/* navy #393968 = rgb(57, 57, 104) — brand-derived rgba    */
	--s-xs:  0 1px 3px  rgba(57, 57, 104, 0.04);
	--s-sm:  0 2px 8px  rgba(57, 57, 104, 0.06);
	--s-md:  0 8px 24px rgba(57, 57, 104, 0.08);
	--s-lg:  0 16px 40px rgba(57, 57, 104, 0.12);
	--s-xl:  0 24px 56px rgba(57, 57, 104, 0.16);

	/* ── Shared Transitions ────────────────────────────────── */
	--t-fast:   200ms cubic-bezier(0.4, 0, 0.2, 1);
	--t-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Layout ────────────────────────────────────────────── */
	--container-max: 1280px;
	--container-pad: 2.5rem;

	/* ── Image System (Customizer-driven, overridable per component) ── */
	--image-fit:            cover;
	--image-radius:         var(--r-md);
	--image-ratio:          1 / 1;

	--image-fit-hero:       var(--image-fit);
	--image-fit-product:    var(--image-fit);
	--image-fit-category:   var(--image-fit);

	--image-ratio-hero:     16 / 9;
	--image-ratio-product:  3 / 4;
	--image-ratio-category: 4 / 3;
}

/* ── Dark Mode Token Overrides ─────────────────────────────── */
[data-theme="dark"] {
	--color-white:    #1a1a2e;
	--color-bg-light: #2a2a4e;
	--color-pale:     var(--color-bg-light);   /* keep alias in sync */

	/* Brand-derived text colors on dark bg */
	--text-main:       var(--color-bg-light);  /* pale lavender on dark */
	--text-muted:      var(--color-secondary-light);
	--text-inverse:    var(--color-primary-dark);
	--text-link:       var(--color-bg-light);
	--text-link-hover: #ffffff;

	--text-primary:   var(--text-main);
	--text-secondary: var(--text-muted);

	/* Shadows on dark mode: pure black, no navy tint */
	--s-xs:  0 1px 3px  rgba(0, 0, 0, 0.12);
	--s-sm:  0 2px 8px  rgba(0, 0, 0, 0.18);
	--s-md:  0 8px 24px rgba(0, 0, 0, 0.22);
	--s-lg:  0 16px 40px rgba(0, 0, 0, 0.28);
	--s-xl:  0 24px 56px rgba(0, 0, 0, 0.35);

	/* Status error-bg darkens for dark mode */
	--status-error-bg: #3d1c1c;
	--color-error-bg:  var(--status-error-bg);
}