/* ============================================================
   Alok Enterprises — Foundations
   Premium faucets, showers & kitchen accessories
   For architects, interior designers & specifiers
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand Color Palette ---------- */
  /* Primary — Verdigris: a deep, considered sage with warmth.
     Inspired by oxidized brass and the patina of well-used fixtures. */
  --ae-verdigris-900: #1a2e25;
  --ae-verdigris-800: #233f33;
  --ae-verdigris-700: #2d4a3e;   /* PRIMARY */
  --ae-verdigris-600: #3d5e51;
  --ae-verdigris-500: #557769;
  --ae-verdigris-400: #7b988b;
  --ae-verdigris-300: #a8bcb1;
  --ae-verdigris-200: #cfdcd4;
  --ae-verdigris-100: #e7ede9;
  --ae-verdigris-50:  #f3f6f4;

  /* Champagne — a warm sand/brass tone for accents and metals */
  --ae-champagne-900: #5a4a2a;
  --ae-champagne-800: #7a6438;
  --ae-champagne-700: #9a8049;
  --ae-champagne-600: #b89a5e;
  --ae-champagne-500: #c9a96e;   /* metallic accent */
  --ae-champagne-400: #d9c9a8;   /* SECONDARY */
  --ae-champagne-300: #e6daba;
  --ae-champagne-200: #ede4c9;
  --ae-champagne-100: #f5efde;
  --ae-champagne-50:  #faf6ec;

  /* Linen — warm off-white, page surface */
  --ae-linen-50:  #faf8f3;
  --ae-linen-100: #f6f3ec;
  --ae-linen-200: #f1ede4;       /* SURFACE */
  --ae-linen-300: #e8e2d4;
  --ae-linen-400: #ddd4c1;

  /* Onyx — true neutral, for type and rules */
  --ae-onyx-900: #0e1310;
  --ae-onyx-800: #1a1f1c;
  --ae-onyx-700: #2a302c;
  --ae-onyx-600: #4a514c;
  --ae-onyx-500: #6e7570;
  --ae-onyx-400: #9aa09c;
  --ae-onyx-300: #c2c7c3;
  --ae-onyx-200: #dee1de;
  --ae-onyx-100: #ecedea;

  /* Semantic — restrained, never loud */
  --ae-success: #4a6d3f;
  --ae-warning: #a87a2f;
  --ae-danger:  #9a3a2c;
  --ae-info:    #3a5d6e;

  /* ---------- Semantic Surface & Foreground ---------- */
  --ae-bg:           var(--ae-linen-200);
  --ae-bg-elevated:  var(--ae-linen-50);
  --ae-bg-inverse:   var(--ae-verdigris-900);
  --ae-bg-accent:    var(--ae-verdigris-700);

  --ae-fg:           var(--ae-onyx-900);
  --ae-fg-muted:     var(--ae-onyx-600);
  --ae-fg-subtle:    var(--ae-onyx-500);
  --ae-fg-inverse:   var(--ae-linen-100);
  --ae-fg-accent:    var(--ae-verdigris-700);
  --ae-fg-brass:     var(--ae-champagne-500);

  --ae-border:        var(--ae-onyx-200);
  --ae-border-strong: var(--ae-onyx-300);
  --ae-border-accent: var(--ae-verdigris-700);
  --ae-rule:          var(--ae-champagne-500);  /* hairline accent rule */

  /* ---------- Typography ---------- */
  --ae-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ae-font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ae-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — modular, slightly more generous than web default,
     to suit a print-influenced editorial layout. */
  --ae-text-xs:   12px;
  --ae-text-sm:   14px;
  --ae-text-base: 16px;
  --ae-text-md:   18px;
  --ae-text-lg:   22px;
  --ae-text-xl:   28px;
  --ae-text-2xl:  36px;
  --ae-text-3xl:  48px;
  --ae-text-4xl:  64px;
  --ae-text-5xl:  88px;
  --ae-text-6xl:  120px;

  --ae-leading-tight:  1.1;
  --ae-leading-snug:   1.25;
  --ae-leading-normal: 1.5;
  --ae-leading-loose:  1.7;

  --ae-tracking-tight:  -0.02em;
  --ae-tracking-normal: 0;
  --ae-tracking-wide:   0.08em;
  --ae-tracking-wider:  0.18em;   /* eyebrow / category labels */
  --ae-tracking-widest: 0.32em;   /* wordmark + small caps */

  /* ---------- Spacing — 4px base ---------- */
  --ae-space-1:  4px;
  --ae-space-2:  8px;
  --ae-space-3:  12px;
  --ae-space-4:  16px;
  --ae-space-5:  20px;
  --ae-space-6:  24px;
  --ae-space-8:  32px;
  --ae-space-10: 40px;
  --ae-space-12: 48px;
  --ae-space-16: 64px;
  --ae-space-20: 80px;
  --ae-space-24: 96px;
  --ae-space-32: 128px;

  /* ---------- Radii — minimal. Premium = mostly square edges ---------- */
  --ae-radius-none: 0;
  --ae-radius-sm:   2px;
  --ae-radius-md:   4px;
  --ae-radius-lg:   8px;
  --ae-radius-pill: 999px;

  /* ---------- Shadows — soft, never harsh ---------- */
  --ae-shadow-xs: 0 1px 2px rgba(14, 19, 16, 0.04);
  --ae-shadow-sm: 0 2px 8px rgba(14, 19, 16, 0.06);
  --ae-shadow-md: 0 8px 24px rgba(14, 19, 16, 0.08);
  --ae-shadow-lg: 0 20px 48px rgba(14, 19, 16, 0.12);
  --ae-shadow-inset: inset 0 0 0 1px rgba(14, 19, 16, 0.06);

  /* ---------- Motion ---------- */
  --ae-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ae-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ae-duration-fast: 160ms;
  --ae-duration-base: 280ms;
  --ae-duration-slow: 520ms;

  /* ---------- Layout ---------- */
  --ae-container:    1280px;
  --ae-container-narrow: 880px;
  --ae-gutter:       64px;
}

/* ============================================================
   Semantic Element Defaults
   ============================================================ */

html {
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-base);
  color: var(--ae-fg);
  background: var(--ae-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  line-height: var(--ae-leading-normal);
}

/* Display headings — serif, generous, never bold-bold */
.ae-display,
.ae-h1, h1 {
  font-family: var(--ae-font-display);
  font-weight: 400;
  font-size: var(--ae-text-5xl);
  line-height: var(--ae-leading-tight);
  letter-spacing: var(--ae-tracking-tight);
  color: var(--ae-fg);
  margin: 0;
}

.ae-h2, h2 {
  font-family: var(--ae-font-display);
  font-weight: 400;
  font-size: var(--ae-text-3xl);
  line-height: var(--ae-leading-snug);
  letter-spacing: var(--ae-tracking-tight);
  margin: 0;
}

.ae-h3, h3 {
  font-family: var(--ae-font-display);
  font-weight: 500;
  font-size: var(--ae-text-2xl);
  line-height: var(--ae-leading-snug);
  margin: 0;
}

.ae-h4, h4 {
  font-family: var(--ae-font-body);
  font-weight: 600;
  font-size: var(--ae-text-lg);
  line-height: var(--ae-leading-snug);
  margin: 0;
}

/* Eyebrow / category — small, ALL CAPS, tracked. Signature element. */
.ae-eyebrow {
  font-family: var(--ae-font-body);
  font-weight: 600;
  font-size: var(--ae-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ae-tracking-wider);
  color: var(--ae-fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ae-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--ae-rule);
}

/* Body */
p, .ae-body {
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-base);
  line-height: var(--ae-leading-loose);
  color: var(--ae-fg-muted);
  margin: 0;
}

.ae-lead {
  font-size: var(--ae-text-md);
  line-height: var(--ae-leading-loose);
  color: var(--ae-fg-muted);
}

/* Small */
small, .ae-caption {
  font-size: var(--ae-text-sm);
  color: var(--ae-fg-subtle);
}

/* Mono — for specs, SKUs, dimensions */
code, .ae-mono {
  font-family: var(--ae-font-mono);
  font-size: var(--ae-text-sm);
  letter-spacing: 0;
}

/* Wordmark — the brand's signature treatment */
.ae-wordmark {
  font-family: var(--ae-font-display);
  font-weight: 400;
  letter-spacing: var(--ae-tracking-widest);
  text-transform: uppercase;
}

/* Hairline rule — brass thread used across the system */
.ae-rule {
  display: block;
  height: 1px;
  background: var(--ae-rule);
  border: 0;
  margin: 0;
}

a {
  color: var(--ae-fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--ae-duration-fast) var(--ae-ease);
}
a:hover { opacity: 0.6; }