/* =============================================================================
   VINÁRSTVO S - PLATFORM DESIGN TOKENS
   Single source of truth for the whole platform (public + future domains + admin).
   Do NOT hardcode colors/spacing in components. Reference these custom properties.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     BRAND COLOR - deep wine / burgundy, warm darks, champagne gold, cream
     --------------------------------------------------------------------------- */

  /* Wine / burgundy scale (primary brand) */
  --c-wine-900: #2a0d15; /* deepest claret, near-black red */
  --c-wine-800: #3d0f1c;
  --c-wine-700: #5b1a2b; /* primary brand wine */
  --c-wine-600: #6f2031;
  --c-wine-500: #8e2a3d; /* vivid bordeaux accent */
  --c-wine-400: #a8455a;
  --c-wine-300: #c06b7e;

  /* Champagne / gold scale (highlights, CTAs accents, dividers) */
  --c-gold-700: #9a7327;
  --c-gold-600: #b88f3a;
  --c-gold-500: #c8a24b; /* primary champagne gold */
  --c-gold-400: #d8b86a;
  --c-gold-300: #e7cf90; /* soft champagne shimmer */
  --c-gold-200: #f1e0b4;

  /* Warm neutral / ink scale (backgrounds + surfaces) */
  --c-ink-1000: #100b09; /* deepest cinematic background */
  --c-ink-900: #14100e;
  --c-ink-800: #1c1714; /* base page background */
  --c-ink-700: #241d19; /* raised surface */
  --c-ink-600: #2f2622; /* card surface */
  --c-ink-500: #3c322c; /* hairline / border on dark */
  --c-ink-400: #574a42;
  --c-ink-300: #7a6a5e;

  /* Cream / off-white scale (text on dark, light surfaces) */
  --c-cream-50: #fbf7f0; /* brightest cream */
  --c-cream-100: #f4ece0; /* primary text on dark */
  --c-cream-200: #e7dccb; /* secondary text */
  --c-cream-300: #cbbda9; /* muted text */
  --c-cream-400: #a99c8a; /* faint / captions */

  /* ---------------------------------------------------------------------------
     SEMANTIC COLOR ROLES (use these in components)
     --------------------------------------------------------------------------- */
  --color-bg: var(--c-ink-800);
  --color-bg-deep: var(--c-ink-1000);
  --color-surface: var(--c-ink-700);
  --color-surface-raised: var(--c-ink-600);
  --color-border: rgba(244, 236, 224, 0.1);
  --color-border-strong: rgba(244, 236, 224, 0.18);
  --color-hairline-gold: rgba(200, 162, 75, 0.32);

  --color-text: var(--c-cream-100);
  --color-text-soft: var(--c-cream-200);
  --color-text-muted: var(--c-cream-300);
  --color-text-faint: var(--c-cream-400);

  --color-brand: var(--c-wine-700);
  --color-brand-bright: var(--c-wine-500);
  --color-accent: var(--c-gold-500);
  --color-accent-soft: var(--c-gold-300);

  --color-on-brand: var(--c-cream-50);
  --color-on-accent: var(--c-ink-900);

  /* Status (admin + forms) */
  --color-success: #5e9c6a;
  --color-success-bg: rgba(94, 156, 106, 0.14);
  --color-warning: #c8a24b;
  --color-warning-bg: rgba(200, 162, 75, 0.14);
  --color-danger: #c25b54;
  --color-danger-bg: rgba(194, 91, 84, 0.14);
  --color-info: #6d8fb0;
  --color-info-bg: rgba(109, 143, 176, 0.14);

  --color-focus-ring: var(--c-gold-400);

  /* ---------------------------------------------------------------------------
     GRADIENTS & OVERLAYS - for cinematic media treatments
     --------------------------------------------------------------------------- */
  --overlay-scrim-strong: linear-gradient(
    180deg,
    rgba(16, 11, 9, 0.55) 0%,
    rgba(16, 11, 9, 0.35) 35%,
    rgba(16, 11, 9, 0.78) 100%
  );
  --overlay-scrim-bottom: linear-gradient(
    180deg,
    rgba(16, 11, 9, 0) 0%,
    rgba(16, 11, 9, 0.85) 100%
  );
  --overlay-scrim-radial: radial-gradient(
    120% 120% at 50% 30%,
    rgba(16, 11, 9, 0.15) 0%,
    rgba(16, 11, 9, 0.7) 100%
  );
  --overlay-wine-glow: radial-gradient(
    60% 80% at 20% 10%,
    rgba(91, 26, 43, 0.55) 0%,
    rgba(16, 11, 9, 0) 60%
  );
  --gradient-gold-text: linear-gradient(
    100deg,
    var(--c-gold-300) 0%,
    var(--c-gold-500) 45%,
    var(--c-gold-200) 100%
  );
  --gradient-brand-veil: linear-gradient(
    160deg,
    rgba(61, 15, 28, 0.9) 0%,
    rgba(16, 11, 9, 0.95) 100%
  );
  --gradient-surface-sheen: linear-gradient(
    160deg,
    rgba(244, 236, 224, 0.06) 0%,
    rgba(244, 236, 224, 0) 40%
  );

  --glass-bg: rgba(28, 23, 20, 0.55);
  --glass-border: rgba(244, 236, 224, 0.12);
  --glass-blur: 16px;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------------- */
  --font-display: "Cormorant", "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid type scale (clamp: min, preferred-vw, max) */
  --fs-display-xl: clamp(3.2rem, 8vw, 7.5rem);
  --fs-display-lg: clamp(2.6rem, 6vw, 5rem);
  --fs-display-md: clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.4rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-overline: 0.72rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-overline: 0.28em;

  /* ---------------------------------------------------------------------------
     SPACING - 4px base rhythm, large cinematic section spacing
     --------------------------------------------------------------------------- */
  --space-2xs: 0.25rem; /* 4 */
  --space-xs: 0.5rem; /* 8 */
  --space-sm: 0.75rem; /* 12 */
  --space-md: 1rem; /* 16 */
  --space-lg: 1.5rem; /* 24 */
  --space-xl: 2rem; /* 32 */
  --space-2xl: 3rem; /* 48 */
  --space-3xl: 4.5rem; /* 72 */
  --space-4xl: 6.5rem; /* 104 */
  --space-5xl: 9rem; /* 144 */

  --section-pad-y: clamp(4.5rem, 9vw, 9rem);
  --section-pad-y-sm: clamp(3rem, 6vw, 5rem);

  /* ---------------------------------------------------------------------------
     LAYOUT WIDTHS
     --------------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-wide: 1480px;
  --container-narrow: 920px;
  --container-prose: 64ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------------------------------------------------------------------------
     RADII
     --------------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     SHADOWS - warm, soft, premium (no flat gray box-shadows)
     --------------------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(16, 11, 9, 0.35);
  --shadow-md: 0 12px 30px rgba(16, 11, 9, 0.45);
  --shadow-lg: 0 28px 60px rgba(16, 11, 9, 0.55);
  --shadow-xl: 0 40px 90px rgba(16, 11, 9, 0.62);
  --shadow-gold-glow: 0 10px 40px rgba(200, 162, 75, 0.22);
  --shadow-inset-sheen: inset 0 1px 0 rgba(244, 236, 224, 0.08);

  /* ---------------------------------------------------------------------------
     Z-INDEX SCALE
     --------------------------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;

  /* ---------------------------------------------------------------------------
     MOTION - timings & easings (cinematic, premium 400–800ms curves)
     --------------------------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-cinematic: 800ms;
  --dur-hero: 1200ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* gentle decel - reveals */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1); /* premium silk */

  /* ---------------------------------------------------------------------------
     BREAKPOINTS (documented here; used via media queries in layout.css)
     --bp-xs 360 | --bp-sm 480 | --bp-md 768 | --bp-lg 1024 | --bp-xl 1280 | --bp-2xl 1536
     --------------------------------------------------------------------------- */

  /* Header height (used for scroll offset + content padding) */
  --header-h: 76px;
}

/* Admin surfaces lean slightly lighter & flatter than the cinematic public side,
   while staying inside the same palette. Applied via .theme-admin scope. */
.theme-admin {
  --color-bg: #161210;
  --color-surface: #1d1815;
  --color-surface-raised: #241e1a;
  --color-border: rgba(244, 236, 224, 0.09);
  --section-pad-y: var(--space-2xl);
}