/*
 * Miras Carpet — CSS Variables (Design Tokens)
 * All brand colors, spacing, typography, shadows, and transitions in one place.
 */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --clr-primary:        #770000;
  --clr-primary-hover:  #5c0000;
  --clr-primary-light:  rgba(119, 0, 0, 0.08);
  --clr-bg:             #FFFAF7;
  --clr-dark:           #29201A;
  --clr-dark-soft:      #3d2e25;
  --clr-comp:           #DFD1C8;
  --clr-comp-light:     #f0e8e2;
  --clr-white:          #FFFFFF;

  /* Semantic */
  --clr-text:           #29201A;
  --clr-text-muted:     #6b5a50;
  --clr-border:         #DFD1C8;
  --clr-surface:        #FFFAF7;
  --clr-surface-alt:    #f5ede6;

  /* Third-party brand */
  --clr-whatsapp:       #25D366;
  --clr-whatsapp-glow:  rgba(37, 211, 102, 0.45);

  /* Glassmorphism */
  --glass-bg:           rgba(255, 250, 247, 0.75);
  --glass-border:       rgba(223, 209, 200, 0.4);
  --glass-shadow:       0 8px 32px rgba(41, 32, 26, 0.12);

  /* ── Typography ───────────────────────────────────────── */
  --font-primary: "Heritage", 'Cairo', system-ui, sans-serif;

  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   1.875rem;  /* 30px */
  --fs-3xl:   2.25rem;   /* 36px */
  --fs-4xl:   3rem;      /* 48px */
  --fs-5xl:   3.75rem;   /* 60px */
  --fs-6xl:   4.5rem;    /* 72px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ── Spacing ──────────────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-px:   clamp(1rem, 4vw, 4rem);

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(41, 32, 26, 0.06);
  --shadow-sm:  0 2px 8px rgba(41, 32, 26, 0.08);
  --shadow-md:  0 4px 16px rgba(41, 32, 26, 0.10);
  --shadow-lg:  0 8px 32px rgba(41, 32, 26, 0.12);
  --shadow-xl:  0 16px 48px rgba(41, 32, 26, 0.16);
  --shadow-primary: 0 4px 20px rgba(119, 0, 0, 0.25);

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

  /* ── Header ───────────────────────────────────────────── */
  --header-height:        80px;
  --header-height-mobile: 64px;

  /* ── Z-index ──────────────────────────────────────────── */
  --z-header:   100;
  --z-modal:    200;
  --z-float:    150;
  --z-dropdown: 110;
}

/* ── Dark section overrides ─────────────────────────────── */
.section--dark {
  --clr-text:       #FFFAF7;
  --clr-text-muted: rgba(255, 250, 247, 0.65);
  --clr-border:     rgba(255, 250, 247, 0.15);
}