/* ============================================================
   Matera Design System v1.0 — design tokens
   Ported unchanged from the published system:
   tokens/colors.css · typography.css · spacing.css · effects.css
   Fonts (Outfit / Hanken Grotesk / Cairo) are linked in index.html.
   ============================================================ */

:root {
  /* ---- Neutrals (the white-lab base) ---- */
  --snow:      #FFFFFF;  /* pure white — primary packaging + page base */
  --paper:     #F7F8FA;  /* off-white surface / section fill */
  --mist:      #EEF1F4;  /* subtle fill, hover rows */
  --cloud:     #E5E9EE;  /* raised chips, embossed feel */
  --line:      #E2E6EB;  /* hairline borders */
  --line-soft: #EDF0F3;  /* faintest divider */

  --ink:       #17181A;  /* near-black — the wordmark ink */
  --graphite:  #2E333A;  /* strong body text */
  --slate:     #5C6673;  /* secondary text */
  --steel:     #838C98;  /* muted text / captions */
  --silver:    #AEB6C0;  /* disabled, placeholder */

  /* ---- Signature brand marks ---- */
  --maple-red:     #C8102E;
  --maple-red-ink: #9E0C24;
  --maple-green:   #16412A;
  --maple-green-ink: #0F2E1D;

  /* ---- Category accents ---- */
  --face:     #1E49A0;  --face-tint:    #E9EEF7;
  --cleanse:  #1B9FC7;  --cleanse-tint: #E4F4F9;
  --body:     #7A3FA0;  --body-tint:    #F0EAF6;
  --repair:   #9B1B9E;  --repair-tint:  #F5E7F5;
  --lips:     #2340B8;  --lips-tint:    #E8ECF9;
  --sun:      #F26A21;  --sun-tint:     #FDECE1;
  --deo:      #C8102E;  --deo-tint:     #FBE7EA;
  --daily:    #4E9E7A;  --daily-tint:   #E8F3ED;
  --hands:    #1AA179;  --hands-tint:   #E4F5EE;
  --travel:   #4A7C94;  --travel-tint:  #E9F0F3;
  --hajj:     #55606B;  --hajj-tint:    #EEF1F4;
  --value:    #6B7581;  --value-tint:   #EDEFF2;

  /* ---- Functional ---- */
  --success: #1E8E5A;  --success-tint: #E6F3EC;
  --warning: #E08A1E;  --warning-tint: #FCF1DF;
  --danger:  #C8102E;  --danger-tint:  #FBE7EA;
  --info:    #1E49A0;  --info-tint:    #E9EEF7;

  /* ---- Semantic aliases ---- */
  --bg-page:    var(--snow);
  --bg-surface: var(--snow);
  --bg-subtle:  var(--paper);
  --bg-muted:   var(--mist);
  --bg-inverse: var(--ink);

  --text-strong:    var(--ink);
  --text-body:      var(--graphite);
  --text-muted:     var(--slate);
  --text-faint:     var(--steel);
  --text-on-accent: var(--snow);
  --text-inverse:   var(--snow);

  --border:        var(--line);
  --border-strong: var(--cloud);
  --border-faint:  var(--line-soft);

  --brand-primary:     var(--face);
  --brand-primary-ink: #163A80;
  --brand-accent:      var(--maple-red);
  --brand-ink:         var(--ink);

  --focus-ring: color-mix(in srgb, var(--brand-primary) 45%, transparent);

  /* ---- Typography ---- */
  --font-display: 'Outfit', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', 'Outfit', system-ui, sans-serif;
  --font-arabic:  'Cairo', 'Outfit', system-ui, sans-serif;

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

  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem;
  --text-base: 1rem;     --text-md: 1.125rem; --text-lg: 1.25rem;
  --text-xl: 1.5rem;     --text-2xl: 1.875rem; --text-3xl: 2.375rem;
  --text-4xl: 3rem;      --text-5xl: 3.75rem;  --text-6xl: 4.75rem;

  --lh-solid: 1; --lh-tight: 1.12; --lh-snug: 1.28;
  --lh-normal: 1.5; --lh-relaxed: 1.68;

  --ls-tighter: -0.03em; --ls-tight: -0.015em; --ls-normal: 0;
  --ls-wide: 0.04em; --ls-wider: 0.09em; --ls-eyebrow: 0.16em;

  /* ---- Spacing (4px grid) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;  --space-8: 3rem;    --space-9: 4rem;
  --space-10: 5rem;   --space-11: 6.5rem; --space-12: 8rem;

  --container-sm: 640px; --container-md: 860px;
  --container-lg: 1120px; --container-xl: 1320px;
  --section-y: clamp(3.5rem, 7vw, 7rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Effects ---- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(23, 24, 26, 0.05);
  --shadow-sm: 0 2px 8px rgba(23, 24, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 24, 26, 0.07);
  --shadow-lg: 0 18px 46px rgba(23, 24, 26, 0.10);
  --shadow-xl: 0 30px 70px rgba(23, 24, 26, 0.12);
  --glow: 0 24px 60px rgba(30, 73, 160, 0.16);

  --border-w: 1px; --border-w-thick: 1.5px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur: 220ms; --dur-slow: 380ms;
  --ring-w: 3px;
}