/* ──────────────────────────────────────────────
   NoeMi Creative — Design Tokens
   Editorial luxury palette in copper / bronze (logo-derived).
   Fluid typography via clamp(). Layered shadows with brand-tinted alpha.
   ────────────────────────────────────────────── */

:root {
  /* ── Color: copper / bronze drawn from the logo ─── */
  --bg:           #FBF8F3;  /* ivory */
  --bg-soft:      #F4ECDD;  /* warm champagne */
  --bg-card:      #FFFFFF;  /* card white */
  --bg-deep:      #1A1612;  /* deep warm charcoal (slight bronze undertone) */
  --bg-deep-soft: #2A241E;  /* deep softer */

  --text:         #1A1612;  /* warm charcoal */
  --text-muted:   #6E6258;  /* warm gray */
  --text-faint:   #A89D90;  /* faint warm gray */
  --text-on-deep: #FBF8F3;
  --text-on-deep-muted: rgba(251, 248, 243, 0.62);

  --border:       #E8DECC;  /* warm border */
  --border-strong:#C9BBA3;  /* darker warm border */

  /* Accent — 8-step tonal scale of the logo copper */
  --accent-50:   #FCF6EF;  /* very light tint */
  --accent-100:  #F5E5D2;  /* peach soft */
  --accent-200:  #EBD0B0;  /* light peach */
  --accent-300:  #DEB587;  /* warm copper light */
  --accent-400:  #CB9869;  /* mid-light copper */
  --accent:      #B97F5A;  /* primary — logo mid-tone */
  --accent-600:  #A36A47;  /* deeper copper */
  --accent-hover:#9C6843;  /* hover (alias of 700) */
  --accent-700:  #9C6843;  /* deep bronze */
  --accent-800:  #7A4F33;  /* darkest bronze */
  --accent-soft: var(--accent-100); /* legacy alias */
  --accent-light:#E8C9A8;  /* logo highlight */

  --success:      #4A6B5A;
  --error:        #B45757;

  /* ── Typography ───────────────────────────── */
  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Fluid type scale (clamp(min, fluid, max)) ──── */
  /* These scale smoothly between mobile (~376px) and desktop (~1280px). */
  --fs-xs:    clamp(0.7rem,  0.66rem + 0.18vw, 0.8rem);     /* ~11→13 */
  --fs-sm:    clamp(0.825rem,0.78rem + 0.22vw, 0.95rem);    /* ~13→15 */
  --fs-base:  clamp(0.95rem, 0.91rem + 0.22vw, 1.075rem);   /* ~15→17 */
  --fs-md:    clamp(1.05rem, 0.99rem + 0.32vw, 1.25rem);    /* ~17→20 */
  --fs-lg:    clamp(1.18rem, 1.08rem + 0.46vw, 1.45rem);    /* ~19→23 */
  --fs-xl:    clamp(1.4rem,  1.22rem + 0.85vw, 1.85rem);    /* ~22→30 */
  --fs-2xl:   clamp(1.7rem,  1.4rem + 1.4vw, 2.4rem);       /* ~27→38 */
  --fs-3xl:   clamp(2.1rem,  1.65rem + 2.1vw, 3.2rem);      /* ~34→51 */
  --fs-4xl:   clamp(2.6rem,  1.9rem + 3.2vw, 4.2rem);       /* ~42→67 */
  --fs-5xl:   clamp(3rem,    2.1rem + 4.2vw, 5.4rem);       /* ~48→86 — hero display */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.02em;
  --ls-base:    0;
  --ls-wide:    0.04em;
  --ls-tracked: 0.18em;

  /* ── Spacing ──────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;
  --space-24: 12rem;

  /* Section padding scales with viewport — replaces hard breakpoints */
  --section-py:    clamp(3rem, 2.2rem + 3.5vw, 6rem);
  --section-py-lg: clamp(4rem, 2.8rem + 5.5vw, 9rem);

  /* ── Layout ───────────────────────────────── */
  --maxw-tight:    640px;
  --maxw-prose:    760px;
  --maxw-default:  1080px;
  --maxw-wide:     1280px;
  --maxw-full:     1440px;

  --gutter-mobile: 1.25rem;
  --gutter-tablet: 2rem;
  --gutter-desk:   3rem;

  /* ── Radii ────────────────────────────────── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ── Shadows (copper-tinted, layered for depth) ─── */
  --shadow-xs:   0 1px 2px rgba(122, 79, 51, 0.04);
  --shadow-sm:   0 1px 2px rgba(122, 79, 51, 0.04), 0 2px 8px rgba(122, 79, 51, 0.06);
  --shadow-soft: 0 1px 3px rgba(122, 79, 51, 0.05), 0 8px 24px rgba(122, 79, 51, 0.08);
  --shadow:      0 2px 4px rgba(122, 79, 51, 0.06), 0 12px 32px rgba(122, 79, 51, 0.12);
  --shadow-lift: 0 4px 8px rgba(122, 79, 51, 0.08), 0 20px 56px rgba(122, 79, 51, 0.16);
  --shadow-deep: 0 8px 16px rgba(122, 79, 51, 0.12), 0 32px 80px rgba(122, 79, 51, 0.22);

  /* Dark-section shadows (for cards on var(--bg-deep)) */
  --shadow-on-deep: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);

  /* ── Motion ───────────────────────────────── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   280ms;
  --dur-slow:   480ms;
  --dur-slower: 800ms;

  /* ── Z-index ──────────────────────────────── */
  --z-nav:     50;
  --z-cta:     60;
  --z-modal:   100;
  --z-toast:   200;
}