/**
 * Blade & Bloom — design tokens
 *
 * Sources:
 * - Logo (hero-cover.png): cream ground, sage ink, botanical greens
 * - GlossGenius theme: forest #134032, bloom #01865D, dark UI palette
 *
 * Marketing site is light-first. GG accent gradient preserved for CTAs.
 */

:root {
  /* ── Primitives: logo ── */
  --color-cream: #fefbf9;
  --color-cream-deep: #f8f5f2;
  --color-sage-ink: #5d7363;
  --color-sage-muted: #7a8b76;
  --color-sage-light: #a3b5a0;
  --color-sage-pale: #d8e2dc;
  --color-blush: #e8d5ce;

  /* ── Primitives: GlossGenius ── */
  --color-forest: #134032;
  --color-bloom: #01865d;
  --color-neutral-warm: #c4bcb9;
  --color-slate: #5a5e6d;
  --color-slate-soft: #727587;
  --color-slate-muted: #9295a5;
  --color-charcoal: #1b1d21;
  --color-charcoal-lift: #21242a;
  --color-charcoal-mid: #2c2e32;
  --color-white: #ffffff;
  --color-error: #ff5454;

  /* ── Brand gradient (GG + bloom line signature) ── */
  --gradient-brand: linear-gradient(135deg, var(--color-forest) 0%, var(--color-bloom) 100%);
  --gradient-brand-horizontal: linear-gradient(
    90deg,
    var(--color-forest) 0%,
    var(--color-bloom) 70%,
    transparent 100%
  );
  --gradient-hero-overlay: linear-gradient(
    180deg,
    rgb(250 249 246 / 0.15) 0%,
    rgb(250 249 246 / 0.85) 55%,
    var(--color-cream) 100%
  );

  /* ── Semantic: surfaces (light mode default) ── */
  --surface-canvas: var(--color-cream);
  --surface-canvas-alt: var(--color-cream-deep);
  --surface-raised: var(--color-white);
  --surface-sunken: var(--color-cream-deep);
  --surface-accent: var(--color-sage-pale);
  --surface-blush: var(--color-blush);

  /* ── Semantic: text ── */
  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-sage-ink);
  --text-tertiary: var(--color-slate);
  --text-muted: var(--color-slate-muted);
  --text-on-brand: var(--color-white);
  --text-link: var(--color-bloom);
  --text-link-hover: var(--color-forest);

  /* ── Semantic: borders ── */
  --border-subtle: rgb(19 64 50 / 0.06);
  --border-default: rgb(19 64 50 / 0.1);
  --border-strong: rgb(19 64 50 / 0.18);
  --border-focus: var(--color-bloom);

  /* ── Semantic: brand actions ── */
  --action-primary-bg: var(--color-bloom);
  --action-primary-bg-hover: var(--color-forest);
  --action-primary-text: var(--color-white);
  --action-secondary-bg: transparent;
  --action-secondary-border: var(--color-sage-ink);
  --action-secondary-text: var(--color-sage-ink);

  /* ── Typography ── */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(2rem, 5vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 7vw, 3.75rem);
  --text-display: clamp(3rem, 10vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.12em;

  /* ── Spacing (4px base) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --content-max: 72rem;
  --content-narrow: 40rem;
  --header-height: 4.5rem;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ── Depth (borders-only strategy) ── */
  --shadow-none: none;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;

  /* ── Components ── */
  --bloom-line-height: 2px;
  --bloom-line-width: 4rem;
  --button-padding-x: 1.75rem;
  --button-padding-y: 0.875rem;
  --card-padding: var(--space-6);
}

/* Dark surfaces — footer strips, optional sections (matches GG booking vibe) */
.theme-dark {
  --surface-canvas: var(--color-charcoal-mid);
  --surface-canvas-alt: var(--color-charcoal);
  --surface-raised: var(--color-charcoal-lift);
  --text-primary: var(--color-white);
  --text-secondary: rgb(255 255 255 / 0.85);
  --text-tertiary: var(--color-slate-muted);
  --text-muted: var(--color-slate-soft);
  --border-subtle: rgb(255 255 255 / 0.06);
  --border-default: rgb(255 255 255 / 0.1);
  --border-strong: rgb(255 255 255 / 0.18);
}