/*
 * Bait Byoot design tokens — see docs/design-system.md
 * Superset of the original public/assets/css/brand.css variables.
 * brand.css keeps its --bb-* names as aliases so existing views that
 * reference them (product-card.php, admin layout) keep working unchanged.
 */
:root {
    /* Brand */
    --color-primary: #2F3B2F;
    --color-primary-dark: #212A21;
    --color-primary-light: #3E4D3E;
    --color-accent: #C9A24B;
    --color-accent-dark: #A9843A;
    --color-wood: #8B5E3C;

    /* Neutrals */
    --color-surface: #FFFFFF;
    --color-surface-soft: #F7F3ED;
    --color-background: #FAF8F4;
    --color-sand: #E4D5C3;
    --color-border: #E3DACB;
    --color-text: #262421;
    --color-text-muted: #6F6B62;

    /* Semantic */
    --color-success: #39724F;
    --color-warning: #B5782E;
    --color-danger: #A5443D;
    --color-info: #3E5C6B;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(34, 39, 33, 0.06);
    --shadow-md: 0 10px 30px rgba(34, 39, 33, 0.09);
    --shadow-lg: 0 22px 60px rgba(34, 39, 33, 0.12);
    --shadow-focus: 0 0 0 0.2rem rgba(47, 59, 47, 0.12);

    /* Dark overlay (image gradients, hover scrims) — RGB triplet so
       callers control opacity: rgba(var(--color-overlay-dark-rgb), 0.5) */
    --color-overlay-dark-rgb: 38, 36, 33;

    /* Spacing (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px; /* editorial section rhythm on desktop */

    /* Typography */
    --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
    --font-en: 'Manrope', sans-serif;

    --fs-display: 2.75rem;
    --fs-h1: 2.25rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.375rem;
    --fs-h4: 1.125rem;
    --fs-body-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.75rem;

    --lh-ar: 1.9;
    --lh-en: 1.5;

    /* Image ratios */
    --ratio-product: 1 / 1;
    --ratio-hero-desktop: 21 / 9;
    --ratio-hero-mobile: 4 / 5;
    --ratio-category: 3 / 4;

    /* Motion */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;
    --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Back-compat aliases for the original brand.css token names */
    --bb-beige: var(--color-sand);
    --bb-off-white: var(--color-background);
    --bb-sand: var(--color-sand);
    --bb-wood: var(--color-wood);
    --bb-forest: var(--color-primary);
    --bb-forest-light: var(--color-primary-light);
    --bb-gold: var(--color-accent);
    --bb-ink: var(--color-text);
    --bb-border: var(--color-border);

    /* Fluid editorial type scale — grows smoothly with viewport width
       instead of jumping at a single breakpoint. Min/max values are the
       same ones this scale has always used; only the interpolation
       between them is new. --fs-h3 and smaller stay fixed, matching the
       engagement brief's own scale shape (only xl-and-up sizes are fluid). */
    --fs-display: clamp(2.75rem, 2.35rem + 2vw, 3.75rem);
    --fs-h1: clamp(2.25rem, 2.05rem + 1vw, 2.75rem);
    --fs-h2: clamp(1.75rem, 1.6rem + 0.75vw, 2.125rem);
}

/*
 * Section B alias layer (engagement brief v2, Section B2-B5).
 * These are read-only entry points, not a second source of truth: every
 * value below points at a token already defined above rather than
 * introducing a new hex/px value, except where the brief names a token
 * with no existing equivalent (marked "new" below) — those get a real
 * value, chosen to sit naturally alongside the existing palette rather
 * than the brief's literal numbers, so nothing already shipped repaints.
 */
:root {
    /* Brand */
    --bb-forest-900: var(--color-primary-dark);
    --bb-forest-700: var(--color-primary);
    --bb-forest-500: var(--color-primary-light);
    --bb-forest-100: #E3EBE5; /* new — no existing light forest tint */

    --bb-gold-700: var(--color-accent-dark);
    --bb-gold-500: var(--color-accent);
    --bb-gold-100: #F3EAD4; /* new — no existing light gold tint */

    --bb-wood-500: var(--color-wood);

    /* Neutrals */
    --bb-ivory: var(--color-background);
    --bb-beige-200: var(--color-surface-soft);
    --bb-beige-400: var(--color-sand);
    --bb-gray-500: var(--color-text-muted);
    --bb-gray-700: #4A4540; /* new — a step darker than gray-500, lighter than ink */
    --bb-white: var(--color-surface);
    /* --bb-ink already defined above (back-compat alias === this token). */

    /* Semantic */
    --bb-success: var(--color-success);
    --bb-warning: var(--color-warning);
    --bb-danger: var(--color-danger);
    --bb-info: var(--color-info);

    /* Spacing — 1 through 9 already exist under --space-*; 10/11 are new. */
    --bb-space-1: var(--space-1);
    --bb-space-2: var(--space-2);
    --bb-space-3: var(--space-3);
    --bb-space-4: var(--space-4);
    --bb-space-5: var(--space-5);
    --bb-space-6: var(--space-6);
    --bb-space-7: var(--space-7);
    --bb-space-8: var(--space-8);
    --bb-space-9: var(--space-9);
    --bb-space-10: 128px; /* new */
    --bb-space-11: 160px; /* new */

    /* Layout */
    --bb-container-max: 1440px; /* new — not yet wired into .container; see Phase 1 follow-ups */
    --bb-content-max: 1200px; /* new */
    --bb-gutter: var(--space-4);
    --bb-gutter-lg: var(--space-6);
    --bb-section-y: 56px; /* new */
    --bb-section-y-lg: var(--space-9);

    /* Radius */
    --bb-radius-none: 0;
    --bb-radius-sm: var(--radius-sm);
    --bb-radius-md: var(--radius-md);
    --bb-radius-lg: var(--radius-lg);
    --bb-radius-pill: var(--radius-pill);

    /* Elevation — three levels, matching the brief's "three levels only" rule. */
    --bb-shadow-1: var(--shadow-sm);
    --bb-shadow-2: var(--shadow-md);
    --bb-shadow-3: var(--shadow-lg);

    /* Motion */
    --bb-dur-fast: var(--motion-fast);
    --bb-dur-base: var(--motion-base);
    --bb-dur-slow: var(--motion-slow);
    --bb-ease: var(--motion-ease);
    --bb-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* new — no existing "ease-out" curve */
}

/*
 * Bootstrap theme-variable mapping (engagement brief v2, Section B1: "map
 * Bootstrap's theme variables onto the tokens rather than adding competing
 * classes"). Overrides Bootstrap 5.3's own runtime custom properties, so
 * any Bootstrap default left untouched by a .bb-* class — most commonly in
 * the admin panel — inherits brand colors instead of Bootstrap blue.
 * RGB triplets are hand-derived from the hex values above (CSS can't
 * convert hex to rgb() at runtime) — reused directly where an equivalent
 * already existed (--color-overlay-dark-rgb === --color-text in rgb).
 */
:root {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 47, 59, 47;
    --bs-secondary: var(--bb-gray-700);
    --bs-secondary-rgb: 74, 69, 64;
    --bs-success: var(--color-success);
    --bs-success-rgb: 57, 114, 79;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 165, 68, 61;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 181, 120, 46;
    --bs-info: var(--color-info);
    --bs-info-rgb: 62, 92, 107;

    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: var(--color-overlay-dark-rgb);
    --bs-body-bg: var(--color-background);
    --bs-emphasis-color: var(--color-text);

    --bs-border-color: var(--color-border);

    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 47, 59, 47;
    --bs-link-hover-color: var(--color-primary-dark);
    --bs-link-hover-color-rgb: 33, 42, 33;

    --bs-focus-ring-color: rgba(47, 59, 47, 0.25);
}