/*
  Madar Jewelry — Design Tokens
  ==============================
  Single source of truth for color, type, spacing, radius, shadow,
  motion and z-index. No component rules live here — see components.css.

  Not yet linked from any page. See DESIGN-SYSTEM.md for the full spec
  and usage guidance.
*/

:root {
  /* ---- Color: surfaces ---- */
  --color-ivory: #F8F3E9;        /* primary page background */
  --color-ivory-deep: #EFE6D2;   /* alternating section background */
  --color-paper: #FFFDF8;        /* cards, gallery tiles, form fields */
  --color-ink: #1E1912;          /* nav + footer background (the two "bookends") */

  /* ---- Color: text ---- */
  --color-text: #1E1912;         /* body copy on ivory/paper */
  --color-text-soft: #5B5044;    /* secondary text */
  --color-text-faint: #8A7F6F;   /* tertiary / captions / placeholders */
  --color-text-on-ink: #F8F3E9;  /* text on nav/footer */
  --color-text-on-ink-soft: #C9BBA4; /* secondary text on nav/footer */

  /* ---- Color: gold family (brand — unchanged hexes) ---- */
  --color-gold: #C9A84C;         /* lines, icons, dividers, decorative fills ONLY — fails AA as text on light surfaces */
  --color-gold-deep: #8B6914;    /* AA-safe gold for links / gold text on ivory & paper */
  --color-gold-light: #E8D5A3;   /* hover tint, glow, highlight — not for text */

  /* ---- Color: borders ---- */
  --color-border: rgba(139, 105, 20, 0.16);        /* hairline, derived from gold-deep */
  --color-border-strong: rgba(139, 105, 20, 0.32);
  --color-border-on-ink: rgba(248, 243, 233, 0.14);

  /* ---- Color: semantic (status / forms) — NOT part of the gold accent ---- */
  --color-success: #15803D;      /* "open now" text/icon — 4.5:1+ on ivory & paper */
  --color-success-bg: #E7F3EA;   /* pale chip background */
  --color-danger: #B91C1C;       /* "closed" / form error text/icon — 4.5:1+ on ivory & paper */
  --color-danger-bg: #FBE9E7;    /* pale chip background */
  --color-success-on-ink: #7CD992;  /* status badge on the dark hero scrim / nav */
  --color-danger-on-ink: #F0938A;   /* status badge on the dark hero scrim / nav */

  /* ---- Typography ---- */
  --font-body: 'Heebo', Arial, sans-serif;                       /* all Hebrew text, all UI */
  --font-accent: 'Cormorant Garamond', Georgia, serif;           /* italic Latin accents only — not Hebrew */

  --text-display: clamp(2.4rem, 5vw, 3.6rem);   /* hero lockup */
  --text-h1: clamp(1.8rem, 4vw, 2.8rem);        /* section titles */
  --text-h2: clamp(1.4rem, 2.6vw, 1.9rem);      /* sub-section titles */
  --text-h3: 1.1rem;                            /* card / block headings */
  --text-body-lg: 1.05rem;
  --text-body: 15px;
  --text-small: 0.82rem;
  --text-micro: 0.72rem;                        /* eyebrows, labels, captions */

  --leading-tight: 1.3;
  --leading-body: 1.7;
  --tracking-label: 0.14em;                     /* uppercase micro-labels */
  --tracking-eyebrow: 0.18em;

  /* ---- Spacing scale (8px rhythm, spacious — marketing page, not a dashboard) ---- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* ---- Radius — deliberately restrained: sharp editorial elegance, not rounded-lg-everywhere ---- */
  --radius-none: 0;          /* default for cards, buttons, images, inputs */
  --radius-pill: 999px;      /* status badges, nav CTA, tags only */

  /* ---- Shadow — warm-tinted, never neutral grey ---- */
  --shadow-sm: 0 1px 2px rgba(30, 25, 18, 0.04), 0 8px 20px -14px rgba(30, 25, 18, 0.16);
  --shadow-md: 0 1px 2px rgba(30, 25, 18, 0.05), 0 16px 36px -18px rgba(30, 25, 18, 0.22);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;      /* hover, focus, small state changes */
  --dur-base: 250ms;      /* button/link transitions */
  --dur-slow: 500ms;      /* larger surface transitions (lightbox, panels) */
  --dur-reveal: 700ms;    /* on-scroll section reveal — deliberately unhurried */

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-mobile-menu: 150;
  --z-lightbox: 200;
}

/*
  Breakpoints (documented, not tokenized — CSS custom properties cannot be
  used inside @media conditions):
    --bp-sm:  480px   phone landscape / large phone
    --bp-md:  768px   tablet / nav collapses to mobile menu here
    --bp-lg:  1024px  small desktop
    --bp-xl:  1280px  wide desktop / container max-width
  See DESIGN-SYSTEM.md § Responsive Breakpoints for usage.
*/