/**
 * Pelagia Book Store — CSS Custom Properties (Design Tokens)
 *
 * Palette:  Terracotta (#B3492F) + Deep Navy (#1B1464) + Light Gray (#F4F4F4)
 * Font:     NB Akademie Std (self-hosted — Regular 400 / Medium 500 / Bold 700)
 * Body:     16px desktop, 15px mobile
 *
 * All theme-wide variables live here. Override via Customizer output
 * in <style id="pelagia-customizer-css"> in the <head>.
 *
 * @package Pelagia
 */

:root {
	/* ── Brand Colors ─────────────────────────────── */
	--color-primary:        #B3492F;   /* Terracotta — CTAs, accents         */
	--color-primary-text:   #9E3D25;   /* Darkened terracotta — WCAG AA text  */
	--color-primary-light:  #C85A3C;   /* Lighter terracotta — hovers         */
	--color-primary-dark:   #8C3420;   /* Darker terracotta — active states   */
	--color-secondary:      #1B1464;   /* Deep Navy — headings, body text     */
	--color-secondary-light:#2E2080;   /* Lighter navy — nav hovers           */
	--color-accent:         #FFFFFF;   /* White — contrast sections           */
	--color-accent-dark:    #F0F0F0;   /* Off-white hover                     */
	--color-dark:           #0E0E0E;   /* Near Black                          */
	--color-body:           #2A2A2A;   /* Body text                           */
	--color-muted:          #6B6B6B;   /* Secondary / meta text               */
	--color-border:         #E0E0E0;   /* Borders / dividers                  */
	--color-bg:             #F4F4F4;   /* Page background                     */
	--color-bg-gray:        #EBEBEB;   /* Section gray background             */
	--color-bg-light:       #E8E8E8;   /* Lighter gray                        */
	--color-white:          #FFFFFF;   /* Pure white                          */

	/* Footer background — Terracotta per design spec */
	--color-footer-bg:      #B3492F;

	/* ── Typography ──────────────────────────────── */
	--font-family: 'NB Akademie Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--font-weight-light:    400;   /* no 300 available → map to 400    */
	--font-weight-regular:  400;
	--font-weight-medium:   500;
	--font-weight-semibold: 700;   /* no 600 available → map to 700    */
	--font-weight-bold:     700;
	--font-weight-black:    700;   /* no 900 available → map to 700    */

	/* ── Type Scale ──────────────────────────────── */
	/* Body: 16px desktop — scales to 15px on mobile via responsive.css */
	--text-body: 1rem;            /* 16px                              */
	--text-xs:   0.75rem;         /* 12px — badges, labels             */
	--text-sm:   0.875rem;        /* 14px — small / meta text          */
	--text-base: 1rem;            /* 16px — layout math reference      */
	--text-md:   1.125rem;        /* 18px                              */
	--text-lg:   1.25rem;         /* 20px                              */
	--text-xl:   1.5rem;          /* 24px                              */
	--text-2xl:  1.75rem;         /* 28px                              */
	--text-3xl:  2rem;            /* 32px                              */
	--text-4xl:  2.5rem;          /* 40px                              */
	--text-5xl:  3rem;            /* 48px                              */
	--text-6xl:  3.75rem;         /* 60px                              */

	/* Heading scale — clamp() for fluid desktop-first scaling          */
	/* H1: 28px mobile → 48px desktop                                  */
	--text-h1: clamp(1.75rem, 4vw, 3rem);
	/* H2: 24px mobile → 32px desktop                                  */
	--text-h2: clamp(1.5rem, 3vw, 2rem);
	/* H3: 18px → 22px                                                 */
	--text-h3: clamp(1.125rem, 2vw, 1.375rem);
	--text-h4: 1.125rem;          /* 18px                              */
	--text-h5: 1rem;              /* 16px                              */
	--text-h6: 0.875rem;          /* 14px                              */

	/* ── Letter Spacing ──────────────────────────── */
	--letter-spacing-h1:  -0.025em;  /* Tight on large headings          */
	--letter-spacing-h2:  -0.020em;
	--letter-spacing-h3:  -0.010em;
	--letter-spacing-ui:   0.040em;  /* Buttons, labels, badges          */
	--letter-spacing-caps: 0.080em;  /* Uppercase micro-labels           */

	/* ── Line Heights ─────────────────────────────── */
	--line-height-tight:   1.2;
	--line-height-snug:    1.3;    /* headings                          */
	--line-height-normal:  1.6;    /* body text                         */
	--line-height-relaxed: 1.75;

	/* ── Body Max Width ──────────────────────────── */
	/* 65–75ch optimises readability for long-form text */
	--body-max-width: 72ch;

	/* ── Spacing ──────────────────────────────────── */
	--space-1:  0.25rem;    /*  4px */
	--space-2:  0.5rem;     /*  8px */
	--space-3:  0.75rem;    /* 12px */
	--space-4:  1rem;       /* 16px */
	--space-5:  1.25rem;    /* 20px */
	--space-6:  1.5rem;     /* 24px */
	--space-8:  2rem;       /* 32px */
	--space-10: 2.5rem;     /* 40px */
	--space-12: 3rem;       /* 48px */
	--space-14: 3.5rem;     /* 56px */
	--space-16: 4rem;       /* 64px */
	--space-20: 5rem;       /* 80px */
	--space-24: 6rem;       /* 96px */

	/* ── Section Vertical Padding ────────────────── */
	--section-pad-y-sm: 3rem;                       /* 48px  — compact sections */
	--section-pad-y:    clamp(3rem, 6vw, 5rem);     /* 48–80px — standard       */
	--section-pad-y-lg: clamp(4rem, 8vw, 6rem);     /* 64–96px — hero / promo   */

	/* ── Layout ───────────────────────────────────── */
	--container-max: 1280px;
	--container-pad: clamp(1rem, 4vw, 2rem);
	--grid-gap:      1.5rem;
	--card-radius:   10px;
	--radius-sm:     8px;
	--radius-md:     10px;
	--radius-lg:     16px;
	--radius-full:   9999px;

	/* ── Shadows ──────────────────────────────────── */
	--shadow-sm:         0 2px 8px rgba(0,0,0,0.04);
	--shadow-md:         0 8px 24px rgba(0,0,0,0.06);
	--shadow-lg:         0 16px 48px rgba(0,0,0,0.08);
	--shadow-xl:         0 24px 64px rgba(0,0,0,0.10);
	--shadow-card-hover: 0 12px 36px rgba(179,73,47,0.12);

	/* ── Transitions ──────────────────────────────── */
	--transition-fast:  150ms ease;
	--transition-base:  250ms ease;
	--transition-slow:  400ms ease;

	/* ── Z-Index ──────────────────────────────────── */
	--z-below:   -1;
	--z-base:     0;
	--z-raised:   10;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-modal:    300;
	--z-toast:    400;
}
