/* =========================================================
   ROOT.CSS — Zivora Lifestyle theme tokens
   Palette derived from the brand logo (deep navy + gold)
   ========================================================= */

:root {
  /* ---------- Brand: Navy ---------- */
  --navy: #0f2544;
  --navy-dark: #081a31;
  --navy-light: #1c3c63;
  --navy-soft: #2b5183;

  /* ---------- Brand: Gold ---------- */
  --gold: #c9a227;
  --gold-light: #e8c766;
  --gold-lighter: #f3e0a8;
  --gold-deep: #9a7a18;

  /* ---------- Semantic brand aliases ---------- */
  --brand-primary: var(--navy);
  --brand-primary-dark: var(--navy-dark);
  --brand-primary-light: var(--navy-light);
  --brand-accent: var(--gold);
  --brand-accent-dark: var(--gold-deep);
  --brand-accent-light: var(--gold-light);

  /* ---------- Surfaces ---------- */
  --color-bg: #ffffff;
  --color-ivory: #fbf9f4;
  --color-champagne: #f5ebd3;
  --color-bg-soft: var(--color-ivory);
  --color-bg-dark: var(--navy-dark);

  /* ---------- Text ---------- */
  --color-heading: #101b2b;
  --color-body: #3a4351;
  --color-muted: #6b7482;
  --color-on-dark: #f4f6f9;
  --color-on-dark-muted: #b6c1d1;

  /* ---------- Lines ---------- */
  --color-border: #e4e0d6;
  --color-border-dark: rgba(255, 255, 255, .14);

  /* ---------- Status ---------- */
  --color-success: #16a34a;
  --color-warning: #d98a06;
  --color-danger: #c92a2a;
  --color-info: var(--navy-soft);

  /* ---------- Gradients ---------- */
  --gradient-gold: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 35%, var(--gold-lighter) 55%, var(--gold) 75%, var(--gold-deep) 100%);
  --gradient-gold-soft: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  --gradient-navy: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  --gradient-champagne: linear-gradient(180deg, var(--color-ivory) 0%, var(--color-champagne) 100%);

  /* ---------- Typography ---------- */
  --font-heading: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --fs-base: 16px;
  --lh-base: 1.65;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-wide: .08em;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- Shadows (navy tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 37, 68, .07);
  --shadow: 0 8px 22px rgba(15, 37, 68, .09);
  --shadow-lg: 0 20px 46px rgba(15, 37, 68, .14);
  --shadow-gold: 0 10px 28px rgba(201, 162, 39, .28);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --header-height: 84px;
  --topbar-height: 40px;
  --section-space: 80px;
  --gap-sm: 12px;
  --gap: 24px;
  --gap-lg: 40px;

  /* ---------- Motion ---------- */
  --transition-fast: .18s ease;
  --transition: .28s ease;
  --transition-slow: .45s cubic-bezier(.4, 0, .2, 1);

  /* ---------- Layers ---------- */
  --z-header: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
}