/*
Theme Name: Zenithy
Theme URI: https://zenithy.mu
Author: Shiawase Ltd
Description: Thème Zenithy — Home, How it works, Shop et pages produit Zenithy Wear.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: zenithy
*/
/* Zenithy webfonts — loaded from Google Fonts CDN.
   SUBSTITUTION NOTE: the original brand uses a custom Trajan-style serif wordmark
   and a heavy condensed sans on flyers/packaging. Nearest Google matches:
     - Cinzel  -> elegant Trajan-style caps (wordmark / serif accents)
     - Oswald  -> heavy condensed grotesque (display headlines)
     - Manrope -> clean humanist sans (body / UI)
   Replace with licensed brand fonts when available. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Oswald:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ============================================================
   ZENITHY · COLOR TOKENS
   Derived from the brand logo + packaging:
   forest green, deep pine, champagne gold, warm ivory.
   ============================================================ */
:root {
  /* ---- Brand greens (the peak) ---- */
  --green-900: #0C1C12;  /* near-black pine — deepest canvas */
  --green-800: #122B1D;  /* logo wordmark green */
  --green-700: #18361F;
  --green-600: #233E2F;  /* logo mountain green — PRIMARY */
  --green-500: #2E4F3C;
  --green-400: #436453;
  --green-300: #6E8A79;
  --green-200: #A8BCAF;
  --green-100: #D6E0D9;
  --green-50:  #EDF1EC;

  /* ---- Champagne gold (the path) ---- */
  --gold-700: #9A8350;
  --gold-600: #B0975F;
  --gold-500: #C7AD77;  /* logo gold — PRIMARY ACCENT */
  --gold-400: #D4BE90;
  --gold-300: #E0CFAC;
  --gold-200: #ECE0C9;
  --gold-100: #F5EEDF;

  /* ---- Warm ivory / neutrals ---- */
  --ivory:    #F6F2E8;  /* primary light surface */
  --cream:    #FBF9F3;
  --paper:    #FFFFFF;
  --sand-200: #E7E0D2;
  --sand-300: #D8CFBC;
  --stone-400:#B7AE9C;
  --stone-500:#8A8475;
  --stone-600:#5E5A4F;
  --ink:      #1A1F1B;  /* near-black warm text */

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--ivory);
  --surface-card:    var(--paper);
  --surface-raised:  var(--cream);
  --surface-inverse: var(--green-600);
  --surface-inverse-deep: var(--green-900);
  --surface-gold:    var(--gold-500);

  /* ---- Semantic: text ---- */
  --text-strong:   var(--ink);
  --text-body:     #34392F;
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-on-green: var(--ivory);
  --text-on-gold:  var(--green-800);
  --text-gold:     var(--gold-700);
  --text-brand:    var(--green-600);

  /* ---- Semantic: borders / lines ---- */
  --border-soft:   #E4DECF;
  --border-base:   #D8CFBC;
  --border-strong: #233E2F;
  --border-gold:   var(--gold-500);
  --hairline-on-green: rgba(246,242,232,0.16);

  /* ---- Status ---- */
  --success: #3F7D55;
  --warning: #C99A3E;
  --danger:  #A8412F;
  --info:    #3C6E7A;

  /* ---- Focus ---- */
  --focus-ring: rgba(199,173,119,0.55);
}

/* ============================================================
   ZENITHY · TYPOGRAPHY TOKENS
   Cinzel (serif caps / wordmark) · Oswald (condensed display)
   · Manrope (body / UI)
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-serif:   'Cinzel', 'Trajan Pro', Georgia, serif;       /* wordmark, refined accents */
  --font-display: 'Oswald', 'Saira Condensed', Impact, sans-serif; /* condensed headlines */
  --font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;  /* paragraphs, UI */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Fluid display scale (condensed Oswald) ---- */
  --display-2xl: 700 clamp(3.5rem, 7vw, 6rem)/0.96 var(--font-display);
  --display-xl:  700 clamp(2.75rem, 5vw, 4.25rem)/1.0 var(--font-display);
  --display-lg:  600 clamp(2.25rem, 3.6vw, 3.25rem)/1.04 var(--font-display);
  --display-md:  600 clamp(1.75rem, 2.6vw, 2.25rem)/1.08 var(--font-display);

  /* ---- Serif heading scale (Cinzel) ---- */
  --serif-lg: 600 clamp(2rem, 3vw, 2.75rem)/1.12 var(--font-serif);
  --serif-md: 600 1.5rem/1.2 var(--font-serif);
  --serif-sm: 600 1.125rem/1.25 var(--font-serif);

  /* ---- Body scale (Manrope) ---- */
  --text-2xl: 500 1.5rem/1.4  var(--font-body);
  --text-xl:  500 1.25rem/1.5 var(--font-body);
  --text-lg:  500 1.125rem/1.55 var(--font-body);
  --text-base:400 1rem/1.6    var(--font-body);
  --text-sm:  400 0.875rem/1.55 var(--font-body);
  --text-xs:  500 0.75rem/1.45 var(--font-body);

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-extra:   800; /* @kind other */

  /* ---- Letter-spacing ---- */
  --tracking-wordmark: 0.28em;  /* Z E N I T H Y spacing */
  --tracking-eyebrow:  0.22em;  /* uppercase labels */
  --tracking-display:  0.005em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;

  /* ---- Line lengths ---- */
  --measure: 64ch; /* @kind other */
  --measure-narrow: 46ch; /* @kind other */
}

/* ============================================================
   ZENITHY · SPACING · RADII · SHADOWS · MOTION
   8px base grid. Restrained radii (premium = crisp corners).
   ============================================================ */
:root {
  /* ---- Spacing (8px grid) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 4vw, 64px); /* @kind spacing */

  /* ---- Radii (crisp, restrained) ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hair: 1px;
  --border-thick: 2px;

  /* ---- Shadows (soft, warm-tinted, never harsh) ---- */
  --shadow-xs: 0 1px 2px rgba(18,43,29,0.06);
  --shadow-sm: 0 2px 8px rgba(18,43,29,0.07);
  --shadow-md: 0 10px 28px rgba(18,43,29,0.10);
  --shadow-lg: 0 24px 60px rgba(12,28,18,0.16);
  --shadow-gold: 0 8px 28px rgba(199,173,119,0.30);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* ---- Motion (calm, premium easing) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */

  /* ---- Z ---- */
  --z-nav: 100; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */
}

/* ============================================================
   ZENITHY · BASE + BRAND UTILITIES
   Element resets, brand primitives, the signature "peak-scale" motif.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-base);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Brand wordmark: ZENITHY in spaced serif caps ---- */
.zenithy-wordmark {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  color: var(--text-brand);
  line-height: 1;
}

/* ---- Eyebrow / kicker: uppercase tracked label ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 0.75rem;
  color: var(--text-gold);
}

/* ---- Condensed display headline ---- */
.display {
  font: var(--display-xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}

/* ---- Gold divider with center node (logo "— · —" motif) ---- */
.rule-gold {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--gold-500);
}
.rule-gold::before, .rule-gold::after {
  content: ""; height: 1px; flex: 1; background: currentColor; opacity: 0.6;
}

/* ============================================================
   PEAK-SCALE PATTERN — the signature brand texture
   (the overlapping scallop "scales" from the packaging cube)
   Apply .scale-pattern to any green surface for a tonal motif.
   ============================================================ */
.scale-pattern {
  position: relative;
}
.scale-pattern::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 100%, transparent 12px, rgba(199,173,119,0.07) 12px, rgba(199,173,119,0.07) 13px, transparent 14px);
  background-size: 44px 30px;
  background-position: 0 0;
  opacity: 0.9;
  mask-image: linear-gradient(180deg, #000, #000);
}

/* Protection gradient: darken bottom of imagery for legible overlay text */
.scrim-bottom {
  position: relative;
}
.scrim-bottom::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(12,28,18,0.78) 100%);
  pointer-events: none;
}

/* Focus visibility */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}