/* ==========================================================================
   FIRKEE ACCESSORIES — Design Tokens
   Colors, typography, spacing, easing, breakpoints
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Sage — Brand Palette --- */
  --color-obsidian: #0e1a0e;
  --color-charcoal: #1e2e1e;
  --color-graphite: #2e422e;
  --color-warm-gray: #567438;
  --color-sand: #A8C298;
  --color-cream: #EEF4E8;
  --color-ivory: #F5F9F0;
  --color-gold: #5A8A4A;
  --color-gold-light: #7AAA6A;
  --color-gold-faint: rgba(90, 138, 74, 0.08);
  --color-rose: #6A9A5A;

  /* --- Brand Logo --- */
  --color-logo: #2E5D30;
  --color-logo-dark: #2E5D30;

  /* --- Typography --- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Outfit', 'Helvetica Neue', sans-serif;

  /* --- Easing --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Layout --- */
  --nav-height: calc(72px + env(safe-area-inset-top));
  --section-pad: clamp(80px, 12vw, 160px);
  --side-pad: clamp(24px, 5vw, 80px);
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;

  /* --- Grain texture (reusable) --- */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Dark mode — flip light surfaces, keep dark sections as-is */
@media (prefers-color-scheme: dark) {
  :root {
    --color-ivory:      #0d1a0b;
    --color-cream:      #162113;
    --color-sand:       #1a2d15;
    --color-gold:       #7aaa6a;
    --color-gold-light: #9aca8a;
    --color-gold-faint: rgba(90, 138, 74, 0.15);
    --color-warm-gray:  #7aaa7a;
  }
}

/* Single brand theme — Firkee Green is the only palette */

@media (max-width: 768px) {
  :root {
    --nav-height: calc(64px + env(safe-area-inset-top));
    --side-pad: clamp(16px, 5vw, 40px);
  }
}

@media (max-width: 480px) {
  :root {
    --side-pad: 16px;
    --section-pad: clamp(56px, 10vw, 80px);
  }
}