/* ============================================================
   STEFANO FABIANI — Design System Variables
   Based on DESIGN.md: "The Stefano Fabiani" Creative North Star
   ============================================================ */

:root {
  /* ── Primary ────────────────────────────────────────── */
  --color-primary: #512609;
  --color-primary-dim: #7a3b10;
  --color-primary-container: #D4956A;
  --color-primary-fixed: #D4956A;
  --color-primary-fixed-dim: #C8844F;
  --color-on-primary: #FFF8F5;
  --color-on-primary-fixed: #4A2008;
  --color-on-primary-fixed-variant: #512609;
  --color-on-primary-container: #5C2D07;
  --color-inverse-primary: #D4956A;

  /* ── Secondary ──────────────────────────────────────── */
  --color-secondary: #5a5c5c;
  --color-secondary-dim: #4e5050;
  --color-secondary-container: #e2e2e2;
  --color-secondary-fixed: #e2e2e2;
  --color-secondary-fixed-dim: #d4d4d4;
  --color-on-secondary: #f2f3f3;
  --color-on-secondary-fixed: #3e4040;
  --color-on-secondary-fixed-variant: #5a5c5c;
  --color-on-secondary-container: #505252;

  /* ── Tertiary ───────────────────────────────────────── */
  --color-tertiary: #4b5d70;
  --color-tertiary-dim: #3f5164;
  --color-tertiary-container: #ccdff6;
  --color-tertiary-fixed: #ccdff6;
  --color-tertiary-fixed-dim: #bed1e7;
  --color-on-tertiary: #ecf3ff;
  --color-on-tertiary-fixed: #2b3d4f;
  --color-on-tertiary-fixed-variant: #485a6d;
  --color-on-tertiary-container: #3e5063;

  /* ── Error ──────────────────────────────────────────── */
  --color-error: #b31b25;
  --color-error-dim: #9f0519;
  --color-error-container: #fb5151;
  --color-on-error: #eff1f2;
  --color-on-error-container: #570008;

  /* ── Surface Architecture (Layered Paper) ───────────── */
  --color-surface: #f5f6f7;            /* Base Layer */
  --color-surface-bright: #f5f6f7;
  --color-surface-dim: #d1d5d7;
  --color-surface-variant: #dadddf;
  --color-surface-tint: #512609;
  --color-surface-container-lowest: #ffffff;  /* Cards / Inputs — "pop" forward */
  --color-surface-container-low: #fff9ee;     /* Sectional Shifts */
  --color-surface-container: #e6e8ea;
  --color-surface-container-high: #e0e3e4;
  --color-surface-container-highest: #dadddf;
  --color-inverse-surface: #0c0f10;
  --color-inverse-on-surface: #9b9d9e;

  /* ── On-Surface ─────────────────────────────────────── */
  --color-on-surface: #2c2f30;          /* Charcoal — max readability */
  --color-on-surface-variant: #595c5d;
  --color-on-background: #2c2f30;
  --color-background: #f5f6f7;

  /* ── Outline ────────────────────────────────────────── */
  --color-outline: #757778;
  --color-outline-variant: #abadae;

  /* ── Typography ─────────────────────────────────────── */
  --font-headline: 'Playfair Display', serif;        /* H1 Display 60-72pt, H2 Section 36-42pt */
  --font-subheading: 'EB Garamond', serif;      /* H3 Subsection 26-30pt */
  --font-body: 'Jost', sans-serif;              /* Body 16-18pt, Caption 12-14pt */
  --font-label: 'Jost', sans-serif;             /* Micro 9-10pt (Light weight) */

  /* Display & Headline Sizes (DESIGN.md §3) */
  --text-display-lg: 3.5rem;       /* 56px — Hero product names */
  --text-display-sm: 2.5rem;       /* 40px */
  --text-headline-md: 1.75rem;     /* 28px — Section titles */
  --text-body-lg: 1rem;            /* 16px — Descriptions */
  --text-label-md: 0.75rem;        /* 12px — Category tags, badges */

  /* Letter Spacing */
  --tracking-tight: -0.02em;       /* Headlines */
  --tracking-wide: 0.05em;         /* Labels / All Caps */
  --tracking-widest: 0.2em;        /* Ultra-wide tags */

  /* ── Spacing (DESIGN.md §6 — Do's) ─────────────────── */
  --spacing-1: 0.25rem;    /* 4px  */
  --spacing-2: 0.5rem;     /* 8px  */
  --spacing-3: 0.75rem;    /* 12px */
  --spacing-4: 1rem;       /* 16px */
  --spacing-6: 1.5rem;     /* 24px — Internal card padding minimum (§5) */
  --spacing-8: 2rem;       /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px — Page margins (§6) */
  --spacing-16: 4rem;      /* 64px — Page margins (§6) */
  --spacing-extra: 1.4rem; /* "Add one more" whitespace rule (§6) */

  /* ── Border Radius (DESIGN.md §5) ──────────────────── */
  --radius-default: 8px;   /* DEFAULT — softens transitions */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Elevation / Shadows (DESIGN.md §4) ────────────── */
  --shadow-ambient: 0 0 32px rgba(44, 47, 48, 0.06);  /* Photographic lightbox */
  --shadow-card: 0 2px 16px rgba(44, 47, 48, 0.04);

  /* ── Layout ─────────────────────────────────────────── */
  --max-width: 1280px;
  --nav-height: 140px; /* brand row (padding-based) + 44px links row */
}

@media (max-width: 767px) {
  :root {
    --nav-height: 96px; /* brand row ~52px + links row ~44px */
  }
}