/* ============================================================
   LATISLIT — Brand Variables (Design Token System)
   Single source of truth for all design tokens.
   Every other stylesheet references these variables.
   ============================================================ */

:root {
	/* ── Colors ────────────────────────────────────────────── */
	--ll-black:         #121212;
	--ll-pure-black:    #000000;
	--ll-white:         #ffffff;
	--ll-off-white:     #f3f3f3;
	--ll-gold:          #d4af37;
	--ll-gold-light:    #e8c84a;
	--ll-gold-dark:     #b8962e;
	--ll-beige:         #f5e9da;
	--ll-beige-dark:    #ede0cc;
	--ll-charcoal:      #222222;
	--ll-gray-dark:     #444444;
	--ll-gray-mid:      #666666;
	--ll-gray-light:    #dddddd;
	--ll-gray-xlight:   #f0f0f0;
	--ll-red:           #e53e3e;
	--ll-green:         #38a169;

	/* ── Semantic Color Aliases ─────────────────────────────── */
	--color-text:         var(--ll-black);
	--color-text-muted:   var(--ll-gray-mid);
	--color-bg:           var(--ll-white);
	--color-bg-alt:       var(--ll-off-white);
	--color-bg-dark:      var(--ll-black);
	--color-bg-warm:      var(--ll-beige);
	--color-accent:       var(--ll-gold);
	--color-border:       var(--ll-gray-light);
	--color-success:      var(--ll-green);
	--color-error:        var(--ll-red);

	/* ── Typography ─────────────────────────────────────────── */
	--font-display:       'Big Shoulders Display', sans-serif;
	--font-body:          'Raleway', sans-serif;
	--font-arabic:        'Cairo', sans-serif;

	--text-xs:    0.6875rem;   /* 11px */
	--text-sm:    0.8125rem;   /* 13px */
	--text-base:  1rem;        /* 16px */
	--text-lg:    1.125rem;    /* 18px */
	--text-xl:    1.25rem;     /* 20px */
	--text-2xl:   1.5rem;      /* 24px */
	--text-3xl:   1.875rem;    /* 30px */
	--text-4xl:   2.25rem;     /* 36px */
	--text-5xl:   3rem;        /* 48px */
	--text-6xl:   3.75rem;     /* 60px */
	--text-hero:  clamp(3rem, 8vw, 6rem);

	--lh-tight:   1.1;
	--lh-snug:    1.3;
	--lh-normal:  1.65;
	--lh-relaxed: 1.8;

	--ls-tight:   -0.02em;
	--ls-normal:  0;
	--ls-wide:    0.05em;
	--ls-wider:   0.08em;
	--ls-widest:  0.12em;

	/* ── Font Weights ───────────────────────────────────────── */
	--w-light:    300;
	--w-regular:  400;
	--w-medium:   500;
	--w-semibold: 600;
	--w-bold:     700;
	--w-black:    900;

	/* ── Spacing ────────────────────────────────────────────── */
	--space-0:    0;
	--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-16:   4rem;      /* 64px */
	--space-20:   5rem;      /* 80px */
	--space-24:   6rem;      /* 96px */
	--space-32:   8rem;      /* 128px */

	/* ── UI ─────────────────────────────────────────────────── */
	--radius:          0px;   /* BRAND: Sharp edges, no rounded corners */
	--radius-sm:       0px;
	--radius-lg:       0px;
	--radius-full:     9999px; /* Pills — used only for badge/tag chips */

	--border-width:    1px;
	--border-style:    solid;
	--border-color:    var(--ll-gray-light);
	--border:          var(--border-width) var(--border-style) var(--border-color);

	/* ── Transitions ────────────────────────────────────────── */
	--ease-in:     cubic-bezier(0.4, 0, 1, 1);
	--ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);

	--dur-fast:   150ms;
	--dur-base:   250ms;
	--dur-slow:   400ms;
	--dur-xslow:  600ms;

	--transition-fast:  var(--dur-fast) var(--ease-inout);
	--transition-base:  var(--dur-base) var(--ease-inout);
	--transition-slow:  var(--dur-slow) var(--ease-inout);

	/* ── Shadows ────────────────────────────────────────────── */
	--shadow-xs:       0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-md:       0 4px 20px rgba(0, 0, 0, 0.10);
	--shadow-lg:       0 8px 40px rgba(0, 0, 0, 0.14);
	--shadow-xl:       0 16px 60px rgba(0, 0, 0, 0.18);
	--shadow-product:  var(--shadow-md);
	--shadow-hover:    var(--shadow-lg);
	--shadow-drawer:   -4px 0 40px rgba(0, 0, 0, 0.20);

	/* ── Z-index ────────────────────────────────────────────── */
	--z-below:    -1;
	--z-base:      0;
	--z-above:    10;
	--z-dropdown: 200;
	--z-sticky:   500;
	--z-overlay:  700;
	--z-drawer:   800;
	--z-header:   900;
	--z-announce: 1000;
	--z-modal:    1100;
	--z-toast:    1200;

	/* ── Layout ─────────────────────────────────────────────── */
	--container-max:   1280px;
	--container-wide:  1440px;
	--container-pad:   clamp(1rem, 4vw, 2.5rem);
	--header-h:        72px;
	--announce-h:      40px;
	--grid-gap:        clamp(1rem, 2vw, 1.5rem);
	--card-gap:        var(--grid-gap);
}

/* ── Dark scheme (future) ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
	/* Intentionally empty — brand uses explicit light mode */
}