/* Purpose: Evermore design tokens. Every colour, font, type size, spacing, motion and layer value lives here — nowhere else. */

:root {
  color-scheme: light;

  /* COLORS — from the Evermore appointment landing page */
  --color-primary:           #123935; /* brand green */
  --color-primary-dark:      #0C2724; /* vault */
  --color-primary-deep:      #081E1B; /* footer */
  --color-primary-night:     #061513; /* hero letterbox */
  --color-primary-ink:       #0A201E; /* call-screen bezel */
  --color-secondary:         #1B4A45; /* velvet */
  --color-accent:            #C8AE7D; /* gold */
  --color-accent-line:       rgba(200, 174, 125, .45);
  --color-accent-faint:      rgba(200, 174, 125, .18);
  --color-accent-wash:       rgba(200, 174, 125, .07);
  --color-bg:                #FFFFFF;
  --color-bg-alt:            #EEF2F0; /* mist */
  --color-surface:           #FFFFFF;
  --color-white:             #FFFFFF;
  --color-black:             #000000;
  --color-ivory:             #F4EFE4;
  --color-ivory-soft:        rgba(244, 239, 228, .72);
  --color-ivory-fine:        rgba(244, 239, 228, .45);
  --color-ivory-placeholder: rgba(244, 239, 228, .4);
  --color-ivory-strong:      rgba(244, 239, 228, .3);
  --color-ivory-chip:        rgba(244, 239, 228, .25);
  --color-ivory-border:      rgba(244, 239, 228, .22);
  --color-ivory-ghost:       rgba(244, 239, 228, .16);
  --color-ivory-track:       rgba(244, 239, 228, .15);
  --color-ivory-rule:        rgba(244, 239, 228, .1);
  --color-text:              #232323;
  --color-text-muted:        #5B605E;
  --color-text-faded:        #8A8F8C;
  --color-border:            #DDE3E0;
  --color-border-soft:       #EDF0EE;
  --color-border-dash:       #B7BDBA;
  --color-live:              #E0534A;
  --color-hangup:            #C9483F;
  --color-error:             #E08A80;
  --color-error-text:        #F0A69D;
  --color-success:           #22c55e;
  --color-warning:           #f59e0b;

  /* Translucent vault/green surfaces */
  --color-vault-solid:       rgba(12, 39, 36, .97);
  --color-vault-strong:      rgba(12, 39, 36, .75);
  --color-vault-hover:       rgba(12, 39, 36, .7);
  --color-vault-glass:       rgba(12, 39, 36, .55);
  --color-green-glass:       rgba(18, 57, 53, .85);
  --color-spot-shade:        rgba(8, 26, 24, .72);
  --color-modal-backdrop:    rgba(6, 20, 18, .94);
  --color-text-shadow:       rgba(0, 0, 0, .8);

  /* Gradients & textures */
  --gradient-hero-overlay:
    radial-gradient(55% 75% at 76% 48%, rgba(27, 74, 69, .55), transparent 70%),
    linear-gradient(90deg, rgba(12, 39, 36, .96) 0%, rgba(12, 39, 36, .82) 42%, rgba(12, 39, 36, .35) 100%),
    linear-gradient(180deg, rgba(12, 39, 36, .5), transparent 25%, transparent 70%, rgba(12, 39, 36, .95));
  --gradient-beam:          radial-gradient(closest-side, rgba(200, 174, 125, .13), rgba(200, 174, 125, .04) 55%, transparent);
  --gradient-reel-mask:     linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  --gradient-sheen:         linear-gradient(100deg, transparent, rgba(255, 250, 235, .22), transparent);
  --gradient-media-fade:    linear-gradient(180deg, transparent 60%, rgba(12, 39, 36, .6));
  --gradient-call:          radial-gradient(70% 80% at 40% 50%, rgba(27, 74, 69, .35), rgba(12, 39, 36, .75));
  --gradient-glow:          radial-gradient(50% 60% at 85% 20%, rgba(27, 74, 69, .65), transparent 70%);
  --gradient-museum:
    linear-gradient(180deg, rgba(12, 39, 36, .35) 0%, rgba(12, 39, 36, 0) 30%, rgba(12, 39, 36, .35) 48%, rgba(12, 39, 36, .92) 80%),
    radial-gradient(100% 80% at 50% 40%, transparent 55%, rgba(12, 39, 36, .55));
  --gradient-museum-mask:   linear-gradient(#000 55%, transparent);
  --gradient-book-visual:   linear-gradient(180deg, rgba(12, 39, 36, .15), rgba(12, 39, 36, .9) 80%);
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* TYPOGRAPHY */
  --font-heading: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-h1:      clamp(38px, 4.2vw, 58px);
  --text-h2:      clamp(30px, 3.1vw, 44px);
  --text-h3:      clamp(20px, 1.7vw, 24px);
  --text-2xs:     0.6875rem; /* 11px */
  --text-xs:      0.75rem;   /* 12px */
  --text-caption: 0.8125rem; /* 13px */
  --text-sm:      0.875rem;  /* 14px */
  --text-body-sm: 0.9375rem; /* 15px */
  --text-base:    1rem;      /* 16px */
  --text-lede:    1.0625rem; /* 17px */
  --text-md:      1.125rem;  /* 18px */
  --text-lg:      1.1875rem; /* 19px */
  --text-xl:      1.25rem;   /* 20px */
  --text-2xl:     1.375rem;  /* 22px */
  --text-3xl:     1.5rem;    /* 24px */

  --leading-tightest: 1.08;
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-cozy:     1.35;
  --leading-compact:  1.4;
  --leading-base:     1.5;
  --leading-normal:   1.6;
  --leading-relaxed:  1.65;
  --leading-body:     1.7;
  --leading-loose:    1.75;

  --tracking-heading: -.005em;
  --tracking-normal:  0;
  --tracking-label:   .04em;
  --tracking-wide:    .14em;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* SPACING — design scale 8 / 16 / 24 / 32 / 48 / 64 / 96 */
  --space-1:  0.25rem; /* 4px  */
  --space-2:  0.5rem;  /* 8px  */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1rem;    /* 16px */
  --space-5:  1.25rem; /* 20px */
  --space-6:  1.5rem;  /* 24px */
  --space-8:  2rem;    /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */

  /* LAYOUT */
  --wrap:      1200px;
  --pad:       clamp(20px, 4vw, 40px);
  --sec:       72px;   /* section padding — widened at md */
  --head-gap:  40px;   /* heading block → content — widened at md */
  --col-gap:   clamp(40px, 6vw, 88px);
  --header-h:  64px;

  /* BUTTONS */
  --btn-height:  47px;
  --btn-pad:     12px 32px;
  --radius-none: 0;
  --radius-full: 50%;

  /* MOTION */
  --ease:        cubic-bezier(.2, .7, .1, 1);
  --ease-expo:   cubic-bezier(.19, 1, .22, 1);
  --ease-cinema: cubic-bezier(.7, 0, .2, 1);
  --ease-zoom:   cubic-bezier(.16, .8, .2, 1);
  --ease-step:   cubic-bezier(.65, 0, .25, 1);
  --duration-fast:   .3s;
  --duration-base:   .35s;
  --duration-medium: .4s;
  --duration-slow:   .6s;

  /* Z-INDEX */
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     200; /* header */
  --z-sticky-bar: 210; /* mobile booking bar */
  --z-modal:      400;
  --z-toast:      500;
}

/* md — 641px and up */
@media (min-width: 641px) {
  :root {
    --sec:      clamp(72px, 9vw, 120px);
    --head-gap: clamp(40px, 5vw, 56px);
    --header-h: 72px;
  }
}