/*
Nilpar Gallery — Design Tokens (Phase 5.0)
Tokens are the interface contract between Nilpar language and CSS implementation.
Rule: prefer tokens over raw values in component CSS.
*/

:root {
  /* ---- Color (porcelain / paper / ink / gold) ---- */
  --ng-color-paper: #f8f5ee;        /* warm paper */
  --ng-color-porcelain: #fbfaf6;    /* slightly brighter surface */
  --ng-color-ink: #141414;          /* near-black ink */
  --ng-color-ink-muted: rgba(20,20,20,.66);
  --ng-color-ink-faint: rgba(20,20,20,.45);
  --ng-color-gold: #C6A55A;
  --ng-color-gold-hover: #B8973F;
  --ng-color-border: rgba(20,20,20,.12);
  --ng-color-hairline: rgba(20,20,20,.07);

  /* ---- Typography ---- */
  --ng-font-serif: "Cormorant Garamond", ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond, serif;
  --ng-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Arial, sans-serif;

  --ng-hero-title-size: clamp(2.6rem, 4.5vw, 4.25rem);
  --ng-hero-sub-size: clamp(1.05rem, 1.75vw, 1.65rem);
  --ng-hero-title-tracking: .02em;
  --ng-hero-sub-tracking: .01em;
  --ng-hero-min-height: 68svh; /* stable mobile viewport */

  --ng-text-h1: clamp(2.1rem, 3.2vw, 3.2rem);
  --ng-text-h2: clamp(1.6rem, 2.2vw, 2.2rem);
  --ng-text-h3: 1.25rem;
  --ng-text-body: 1rem;
  --ng-text-small: .925rem;
  --ng-text-caption: .875rem;

  --ng-line-body: 1.65;
  --ng-line-tight: 1.2;

  /* ---- Rhythm / Layout ---- */
  --ng-reading-width: 820px;     /* institutional rhythm */
  --ng-width-reading: var(--ng-reading-width); /* alias: legacy token name */
  --ng-page-max: 1240px;

  /* ---- Spacing scale (quiet increments) ---- */
  --ng-space-1: .25rem;
  --ng-space-2: .5rem;
  --ng-space-3: .75rem;
  --ng-space-4: 1rem;
  --ng-space-5: 1.5rem;
  --ng-space-6: 2rem;
  --ng-space-7: 3rem;
  --ng-space-8: 4rem;
  --ng-space-9: 6rem;

  /* ---- Radius / Shadow (soft authority) ---- */
  --ng-radius-soft: 22px;
  --ng-radius-card: 28px;
  --ng-radius-pill: 999px;

  --ng-shadow-float: 0 16px 44px rgba(20,20,20,.10);
  --ng-shadow-soft: 0 10px 30px rgba(20,20,20,.08);

  /* ---- Motion (respect reduced motion in CSS/JS) ---- */
  --ng-ease-quiet: cubic-bezier(.2,.8,.2,1);
  --ng-dur-fast: 180ms;
  --ng-dur-med: 280ms;

  /* ---- Z ---- */
  --ng-z-header: 60;
  --ng-z-overlay: 80;
  --ng-z-modal: 120;
/* ---- Buttons / Focus ---- */
--ng-focus-ring: 2px solid rgba(20,20,20,.85);
--ng-focus-offset: 4px;

--ng-btn-radius: var(--ng-radius-pill);
--ng-btn-pad-y: .55rem;
--ng-btn-pad-x: .9rem;
--ng-btn-font: var(--ng-text-small);

--ng-btn-bg: var(--ng-color-porcelain);
--ng-btn-border: var(--ng-color-hairline);
--ng-btn-shadow: var(--ng-shadow-soft);

--ng-btn-bg-hover: rgba(20,20,20,.04);
--ng-btn-ink: var(--ng-color-ink);
--ng-btn-ink-muted: var(--ng-color-ink-muted);
/* ---- Type rhythm ---- */
--ng-type-tracking: .01em;
--ng-type-measure: 68ch; /* comfortable prose measure */
--ng-type-paragraph-space: 1.05em;

--ng-h1-size: var(--ng-text-h1);
--ng-h2-size: var(--ng-text-h2);
--ng-h3-size: var(--ng-text-h3);
/* ---- Card / CTA tone ---- */
--ng-card-bg: var(--ng-color-porcelain);
--ng-card-border: var(--ng-color-hairline);
--ng-card-shadow: var(--ng-shadow-soft);
--ng-card-radius: var(--ng-radius-card);

--ng-cta-bg: transparent;
--ng-cta-border: rgba(185,151,74,.45);
--ng-cta-ink: var(--ng-color-ink);
--ng-cta-bg-hover: rgba(185,151,74,.08);
/* ---- Section rhythm / containers ---- */
--ng-gutter-x: clamp(1rem, 3vw, 2rem);
--ng-section-y: clamp(2.25rem, 5vw, 4.25rem);
--ng-section-y-tight: clamp(1.5rem, 3.5vw, 3rem);
--ng-stack-gap: var(--ng-space-6);
--ng-stack-gap-tight: var(--ng-space-4);
--ng-reading-width-narrative: 680px;
--ng-footer-link-pad-y: .25rem;
--ng-input-border-strong: rgba(20,20,20,.4);
--ng-btn-border-strong: var(--ng-color-ink);
--ng-thumb-size: 4.5rem;
--ng-radius-tight: .125rem;
--ng-line-style-row: 1.6;
--ng-modal-image-max-height: 86vh;
--ng-modal-frame-max-width: 92vw;
--ng-modal-frame-max-height: 92vh;
--ng-color-ink-legal: var(--ng-color-ink-muted);
}