/**
 * JAFRA — Design Tokens
 *
 * THE canonical source of visual design values. Every colour, size, spacing and
 * timing value used anywhere in the theme resolves back to this file.
 *
 * Extracted mechanically from the finalized .dc.html designs in
 * "Project figma/", then reconciled against docs/DESIGN-TOKENS.md.
 *
 * RULES FOR EDITING THIS FILE
 *  - Values are preserved EXACTLY as authored in the designs. The half-pixel
 *    sizes (12.5px, 13.5px, 9.5px, 16.5px) and irregular letter-spacing are
 *    deliberate editorial decisions, NOT noise. Do not round them.
 *  - Near-duplicate warm neutrals are kept distinct on purpose. See
 *    docs/TOKEN-MAPPING.md — no two values may be merged without completing the
 *    render-and-diff validation described there.
 *  - Do not add a value here that is not present in the designs. If a new value
 *    is genuinely required, document why in docs/IMPLEMENTATION-DECISIONS.md.
 */

:root {
	/* ==================================================================
	 * COLOUR — BRAND
	 * Approved palette (decision B1): the finalized .dc.html warm palette
	 * supersedes the older neutral specification palette.
	 * ================================================================== */

	--jafra-color-burgundy: #991915;          /* primary accent, CTAs, badges, underline sweep */
	--jafra-color-burgundy-hover: #7A1411;    /* .btnp:hover — explicit in the design CSS */
	--jafra-color-burgundy-admin: #B0161A;    /* admin only: sidebar rail, notification dot */

	--jafra-color-ink: #26221D;               /* primary text, header, dark surfaces */
	--jafra-color-ink-deep: #211E19;          /* footer, admin sidebar, manifesto band */
	--jafra-color-ink-soft: #34302A;          /* hairline on dark surfaces */
	--jafra-color-ink-darkest: #17140F;       /* deepest editorial panels */
	--jafra-color-ink-hover: #3A342B;         /* newsletter submit hover (.jfn a:hover) */
	--jafra-color-ink-panel: #181510;         /* manifesto image panel ground */

	/* ==================================================================
	 * COLOUR — SURFACES
	 * ================================================================== */

	--jafra-color-bg: #FAF7F2;                /* page background, header, card surface */
	--jafra-color-surface-alt: #EFE9E0;       /* product image placeholder, alt sections */
	--jafra-color-surface-warm: #F1EBE0;      /* reviews band */
	--jafra-color-surface-warm-2: #E7DECF;    /* brand-story band, review card border */
	--jafra-color-surface-sand: #E4DBCC;      /* collection / community image placeholder */

	/* ==================================================================
	 * COLOUR — TEXT
	 * ================================================================== */

	--jafra-color-text: #26221D;
	--jafra-color-text-muted: #8A8175;
	--jafra-color-text-subtle: #6B6357;
	--jafra-color-text-on-dark: #FAF7F2;
	--jafra-color-text-on-dark-2: #F1ECE3;    /* announcement bar */
	--jafra-color-text-on-dark-3: #E6DFD2;    /* manifesto English display line */
	--jafra-color-text-on-dark-body: #B7B0A4; /* manifesto body copy */
	--jafra-color-text-on-dark-meta: #B9B1A2; /* order-received confirmation meta */
	--jafra-color-text-warm: #4A4437;         /* brand story body copy on beige */
	--jafra-color-text-hero: #E4DDD0;         /* collection hero body copy */
	--jafra-color-text-quote: #38332B;        /* review card quote */
	--jafra-color-text-copy: #5A5347;         /* product detail body copy */

	/* Footer greys form a deliberate three-step hierarchy on #211E19:
	 * body -> links -> legal. They look near-identical in isolation.
	 * DO NOT MERGE — see docs/TOKEN-MAPPING.md §3. */
	--jafra-color-text-footer-body: #948D80;
	--jafra-color-text-footer-link: #A7A093;
	--jafra-color-text-footer-meta: #8A8378;

	/* ==================================================================
	 * COLOUR — WARM ACCENTS
	 * ================================================================== */

	--jafra-color-beige: #C9B79A;             /* footer column headings, hero eyebrow rule */
	--jafra-color-beige-newsletter: #DCCFB6;  /* newsletter band bg; order-received kufi */
	--jafra-color-beige-eyebrow: #E4D9C6;     /* hero eyebrow text */
	--jafra-color-beige-mid: #A79B88;         /* inactive checkout step, section eyebrow */
	--jafra-color-beige-tag: #D8C9AF;         /* collection card tag line */
	--jafra-color-beige-story: #9A8C74;       /* brand story eyebrow */
	--jafra-color-dot-idle: #CFC6B6;          /* reviews progress dot, inactive */

	/* ==================================================================
	 * COLOUR — BORDERS
	 * ================================================================== */

	--jafra-color-border: #EAE3D7;            /* header / section hairline */
	--jafra-color-border-warm: #E7DECF;       /* card borders */
	--jafra-color-border-strong: #D8CFBF;     /* filter chips, step connectors */
	--jafra-color-track: #D2C6AF;             /* free-shipping progress track */

	/* ==================================================================
	 * COLOUR — STATUS (order / account)
	 * Paired background + foreground, from account.dc.html.
	 * ================================================================== */

	--jafra-color-status-success-bg: #E0E8DB;
	--jafra-color-status-success-fg: #3E5A38;
	--jafra-color-status-transit-bg: #F0E4CB;
	--jafra-color-status-transit-fg: #8A6A2E;
	--jafra-color-status-neutral-bg: #E7DECF;
	--jafra-color-status-neutral-fg: #5A5140;

	/* ==================================================================
	 * COLOUR — OVERLAYS
	 * NOTE: the overlay base is #181510, which is deliberately NOT
	 * --jafra-color-ink. Exposed as a channel triplet so gradients can vary
	 * alpha without restating the colour.
	 * ================================================================== */

	--jafra-overlay-rgb: 24, 21, 17;
	/* The collection hero uses a DIFFERENT overlay base — rgba(23,20,15),
	 * i.e. #17140F. Kept separate rather than merged with the one above. */
	--jafra-overlay-deep-rgb: 23, 20, 15;
	--jafra-color-scrim-light: rgba(250, 247, 242, 0.92);  /* wishlist button */
	--jafra-color-scrim-light-strong: rgba(250, 247, 242, 0.96); /* quick-view bar */
	--jafra-color-border-on-dark: rgba(250, 247, 242, 0.6); /* light button border */

	/* ==================================================================
	 * TYPOGRAPHY — FAMILIES
	 * ================================================================== */

	/*
	 * Fallback stacks are the designs' own, verbatim — NOT "improved" ones.
	 *
	 * This matters more than it looks. Several glyphs the designs use fall
	 * outside the webfont subsets and therefore always render from the
	 * fallback: the → arrow (U+2192) is absent from DM Sans's latin range, so
	 * every "Shop →" and "VIEW ALL COLLECTIONS →" is drawn by the fallback
	 * family. A richer stack (system-ui, Segoe UI, …) was tried first and made
	 * those labels 1.8px narrower than the design.
	 */
	--jafra-font-body: 'DM Sans', sans-serif;
	--jafra-font-serif: 'Cormorant Garamond', serif;
	--jafra-font-kufi: 'Reem Kufi', sans-serif;
	--jafra-font-arabic: 'IBM Plex Sans Arabic', sans-serif;

	/* ==================================================================
	 * TYPOGRAPHY — SIZE SCALE
	 * Authored values, verbatim. Half-pixel steps are intentional.
	 * ================================================================== */

	--jafra-text-9: 9px;
	--jafra-text-9-5: 9.5px;      /* cart badge, desktop */
	--jafra-text-10: 10px;
	--jafra-text-10-5: 10.5px;    /* mobile eyebrow, product badge */
	--jafra-text-11: 11px;        /* footer column headings */
	--jafra-text-11-5: 11.5px;
	--jafra-text-12: 12px;        /* hero eyebrow, desktop */
	--jafra-text-12-5: 12.5px;    /* nav links, buttons, announcement — load-bearing */
	--jafra-text-13: 13px;
	--jafra-text-13-5: 13.5px;
	--jafra-text-14: 14px;        /* footer links and body */
	--jafra-text-14-5: 14.5px;
	--jafra-text-15: 15px;
	--jafra-text-15-5: 15.5px;
	--jafra-text-16: 16px;
	--jafra-text-16-5: 16.5px;    /* hero body */
	--jafra-text-17: 17px;
	--jafra-text-18: 18px;
	--jafra-text-19: 19px;
	--jafra-text-20: 20px;
	--jafra-text-21: 21px;
	--jafra-text-22: 22px;
	--jafra-text-24: 24px;
	--jafra-text-26: 26px;
	--jafra-text-28: 28px;
	--jafra-text-30: 30px;
	--jafra-text-32: 32px;
	--jafra-text-34: 34px;
	--jafra-text-36: 36px;
	--jafra-text-38: 38px;
	--jafra-text-40: 40px;
	--jafra-text-42: 42px;
	--jafra-text-44: 44px;
	--jafra-text-52: 52px;
	--jafra-text-56: 56px;
	--jafra-text-58: 58px;        /* mobile hero Arabic */
	--jafra-text-60: 60px;
	--jafra-text-64: 64px;
	--jafra-text-66: 66px;        /* journal display heading */
	--jafra-text-96: 96px;        /* desktop hero Arabic */

	/* ==================================================================
	 * TYPOGRAPHY — WEIGHT
	 * 600 is the dominant weight in the designs (417 of 449 declarations)
	 * and is the base emphasis weight, NOT 700.
	 * ================================================================== */

	--jafra-weight-light: 300;    /* Arabic body only */
	--jafra-weight-regular: 400;
	--jafra-weight-medium: 500;
	--jafra-weight-semibold: 600; /* default for headings, nav, buttons, labels */
	--jafra-weight-bold: 700;

	/* ==================================================================
	 * TYPOGRAPHY — LINE HEIGHT
	 * ================================================================== */

	--jafra-lh-90: 0.9;
	--jafra-lh-92: 0.92;
	--jafra-lh-95: 0.95;
	--jafra-lh-96: 0.96;          /* hero Arabic */
	--jafra-lh-100: 1;
	--jafra-lh-105: 1.05;
	--jafra-lh-115: 1.15;
	--jafra-lh-125: 1.25;
	--jafra-lh-140: 1.4;
	--jafra-lh-150: 1.5;
	--jafra-lh-160: 1.6;
	--jafra-lh-165: 1.65;         /* hero body */
	--jafra-lh-170: 1.7;          /* footer blurb */
	--jafra-lh-175: 1.75;

	/* ==================================================================
	 * TYPOGRAPHY — LETTER SPACING
	 * The wide uppercase tracking is a defining brand characteristic.
	 * ================================================================== */

	--jafra-ls-tight: -0.01em;    /* large serif headings */
	--jafra-ls-01: 0.01em;        /* hero Arabic */
	--jafra-ls-02: 0.02em;        /* brand values title */
	--jafra-ls-03: 0.03em;        /* collection card English name */
	--jafra-ls-04: 0.04em;        /* breadcrumb */
	--jafra-ls-05: 0.05em;        /* mobile sort control */
	--jafra-ls-06: 0.06em;
	--jafra-ls-08: 0.08em;        /* footer legal */
	--jafra-ls-10: 0.1em;         /* buttons */
	--jafra-ls-13: 0.13em;        /* nav links, text CTAs */
	--jafra-ls-14: 0.14em;        /* announcement bar */
	--jafra-ls-16: 0.16em;        /* article kicker, product callout */
	--jafra-ls-18: 0.18em;        /* admin group labels */
	--jafra-ls-20: 0.2em;         /* footer column headings */
	--jafra-ls-22: 0.22em;        /* collection card tag line */
	--jafra-ls-26: 0.26em;        /* hero eyebrow, mobile */
	--jafra-ls-28: 0.28em;        /* admin brand sub-label */
	--jafra-ls-30: 0.3em;         /* section eyebrows */
	--jafra-ls-32: 0.32em;        /* hero eyebrow, desktop */

	/* ==================================================================
	 * SPACING
	 * The 4px scale covers general use. The designs also use an editorial
	 * rhythm that departs from it — those values are named separately below
	 * rather than being forced onto the scale.
	 * ================================================================== */

	--jafra-space-2: 2px;
	--jafra-space-4: 4px;
	--jafra-space-8: 8px;
	--jafra-space-12: 12px;
	--jafra-space-16: 16px;
	--jafra-space-24: 24px;
	--jafra-space-32: 32px;
	--jafra-space-48: 48px;
	--jafra-space-64: 64px;
	--jafra-space-80: 80px;
	--jafra-space-120: 120px;

	/* Editorial rhythm — design-specific, deliberately off-scale. */
	--jafra-section-gap: 104px;   /* margin-top on homepage sections 06 and 08 */
	--jafra-nav-gap: 34px;        /* desktop nav link gap */
	--jafra-icon-gap: 24px;       /* desktop header icon gap */
	--jafra-icon-gap-mobile: 16px;

	/* ==================================================================
	 * LAYOUT — CONTAINERS
	 * ================================================================== */

	--jafra-container: 1240px;              /* canonical */
	--jafra-container-checkout: 1180px;
	--jafra-container-wide: 1300px;
	--jafra-container-editorial: 720px;     /* article body, newsletter inner */
	--jafra-container-narrow: 640px;
	--jafra-container-form: 520px;          /* newsletter input row */
	--jafra-container-xnarrow: 440px;

	--jafra-gutter: 44px;                   /* desktop */
	--jafra-gutter-mobile: 18px;            /* header */
	--jafra-gutter-mobile-section: 24px;    /* content sections */

	/* ==================================================================
	 * LAYOUT — FIXED HEIGHTS
	 * ================================================================== */

	--jafra-announcement-height: 42px;
	--jafra-announcement-height-mobile: 34px;
	--jafra-header-height: 84px;
	--jafra-header-height-mobile: 60px;
	--jafra-logo-height: 58px;
	--jafra-logo-height-footer: 64px;
	--jafra-logo-height-mobile: 44px;
	--jafra-input-height: 54px;
	--jafra-hero-height: 760px;
	--jafra-hero-height-mobile: 580px;

	/* ==================================================================
	 * RADIUS
	 * ================================================================== */

	--jafra-radius-xs: 2px;       /* badges */
	--jafra-radius-sm: 3px;       /* buttons, inputs — the default */
	--jafra-radius-md: 4px;
	--jafra-radius-admin-nav: 7px;
	--jafra-radius-lg: 8px;       /* admin cards */
	--jafra-radius-pill-27: 27px;
	--jafra-radius-pill-36: 36px;
	--jafra-radius-pill: 100px;
	--jafra-radius-round: 50%;

	/* ==================================================================
	 * BORDERS
	 * ================================================================== */

	--jafra-border-width: 1px;
	--jafra-border-width-input: 1.5px;
	--jafra-border-hairline: 1px solid var(--jafra-color-border);
	--jafra-border-input: 1.5px solid var(--jafra-color-ink);
	--jafra-border-on-dark: 1.5px solid var(--jafra-color-border-on-dark);
	--jafra-icon-stroke: 1.4;     /* every SVG icon, universally */

	/* ==================================================================
	 * SHADOWS
	 * The finalized designs use NO UI shadows. The flat, borders-and-hairlines
	 * aesthetic is deliberate — see docs/DESIGN-DISCREPANCIES.md §2. The one
	 * value below is reserved for the undesigned drawer/modal, per that note.
	 * ================================================================== */

	--jafra-shadow-drawer: -4px 0 16px rgba(0, 0, 0, 0.1);

	/* ==================================================================
	 * MOTION
	 * ================================================================== */

	--jafra-ease: cubic-bezier(0.2, 0.7, 0.2, 1);   /* the JAFRA curve */
	--jafra-duration-fast: 0.25s;    /* colour / hover */
	--jafra-duration-normal: 0.35s;  /* card element reveals */
	--jafra-duration-slow: 0.4s;     /* underline sweep */
	--jafra-duration-hero: 1s;       /* hero entrance */
	--jafra-duration-label: 0.5s;    /* collection card label lift */
	--jafra-duration-tile: 0.6s;     /* community tile zoom, product image fade */
	--jafra-duration-zoom: 0.7s;     /* collection card image zoom */

	--jafra-hero-delay-1: 0.05s;
	--jafra-hero-delay-2: 0.18s;
	--jafra-hero-delay-3: 0.32s;

	--jafra-announcement-interval: 4400ms; /* consumed by JS via getComputedStyle */

	/* ==================================================================
	 * IMAGE RATIOS
	 * ================================================================== */

	--jafra-ratio-product: 3 / 4;      /* dominant — product card and gallery */
	--jafra-ratio-square: 1 / 1;       /* community tiles, avatars */
	--jafra-ratio-collection: 4 / 5;
	--jafra-ratio-editorial: 4 / 3;
	--jafra-ratio-band: 16 / 11;
	--jafra-ratio-wide: 16 / 9;

	/* ==================================================================
	 * Z-INDEX LAYERS
	 * Not present in the designs (single-layer artboards). Defined here so
	 * later phases stack consistently rather than inventing values ad hoc.
	 * Documented in docs/IMPLEMENTATION-DECISIONS.md.
	 * ================================================================== */

	--jafra-z-base: 1;
	--jafra-z-raised: 3;        /* product card badge / wishlist / quick-view */
	--jafra-z-sticky: 100;      /* sticky product and checkout bars */
	--jafra-z-header: 200;
	--jafra-z-overlay: 900;     /* drawer + modal scrim */
	--jafra-z-drawer: 1000;
	--jafra-z-toast: 1100;

	/* ==================================================================
	 * BREAKPOINTS (reference only)
	 * Custom properties cannot be used in media queries, so these are
	 * documentation. The literal values live in base.css and components.css.
	 *   mobile   < 768px
	 *   tablet   768px - 1023px   (derived; no artboard exists)
	 *   desktop  >= 1024px
	 * ================================================================== */

	--jafra-bp-tablet: 768px;
	--jafra-bp-desktop: 1024px;
}