/* =====================================================================
   tokens.css — Kiosk design system (LINK THIS FIRST) · "MARQUEE" edition
   Cinematic hero + refined color-coded grid. White/platinum base,
   burgundy ("wine") as the brand anchor, warm gold accent.
   Type: Fraunces (display serif) + Inter (UI). Engine-default tokens,
   WCAG-contrast-audited. Per-community brand/asset overrides live in
   theme/theme.<slug>.css (linked AFTER).
   Self-hosted fonts → works fully offline (no fonts.googleapis.com).
   ===================================================================== */

/* ---- Fonts (self-hosted variable woff2, latin subset — covers Spanish) ---- */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../fonts/fraunces-vf.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:italic; font-weight:400 600; font-display:swap;
  src:url("../fonts/fraunces-italic-vf.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/inter-vf.woff2") format("woff2"); }
@font-face{ font-family:"Material Symbols Rounded"; font-style:normal; font-weight:100 700; font-display:block;
  src:url("../fonts/material-symbols-rounded.woff2") format("woff2"); }

:root{
  /* ---- Brand & semantic colors (engine defaults; theme may override) ---- */
  --brand:               #7A1E2E;   /* wine — white text 9.4:1 */
  --brand-2:             #641826;   /* deep wine */
  --brand-bright:        #841F30;   /* lighter gradient stop for brand fills */
  --brand-glow:          rgba(122,30,46,.30);  /* brand-tinted shadow/pulse */
  --brand-soft-border:   #E0C4C9;   /* quiet brand-tinted outline (emergency pill) */
  --gold:                #B5904E;   /* warm gold accent */
  --gold-soft:           #F2D7A4;   /* gold highlight on dark photo scrims */

  --app-bg: radial-gradient(150% 120% at 50% -12%, #FCFCFD 0%, #F3F5F8 52%, #E9ECF1 100%);
  --surface:    #FFFFFF;
  --surface-2:  #F3F5F8;
  --hairline:   #E4E8ED;
  --ink:        #1C2026;
  --ink-soft:   #586069;
  --ink-faint:  #8B939E;
  --on-brand:   #FFFFFF;

  --chip: linear-gradient(152deg,#FFFFFF 0%, #ECEFF3 100%);
  --chip-border: #DBE0E7;
  --card-border: #E6EAEF;

  --success:    #4F7D54;
  --warn:       #8A5A00;
  --warn-fill:  #F4A100;
  --danger:     #A1121F;

  --focus:          #1E6FD9;   /* focus ring stays vivid blue — must stand out from the wine palette */
  --focus-contrast: #FFFFFF;

  /* Legacy accent aliases (kept so older engine styles keep resolving) */
  --accent-pool:         #2E7D8A;
  --accent-splash:       #A1424A;
  --accent-splash-deep:  #8E2F38;
  --accent-sun:          #B5904E;
  --accent-sun-deep:     #9A7840;
  --accent-grass:        #5B7A52;
  --accent-grass-deep:   #4F6B47;
  --accent-sky:          #3F5E8A;
  --accent-grape:        #7A5AA0;

  /* ---- Category accents (quiet color-coding on the Marquee grid) ---- */
  --cat-portal:    #7A1E2E;
  --cat-amenities: #C2603F;
  --cat-reserve:   #B5904E;
  --cat-pool:      #2E7D8A;
  --cat-events:    #8A5A7A;
  --cat-news:      #8A5A7A;
  --cat-map:       #5B7A52;
  --cat-docs:      #3F5E8A;
  --cat-contact:   #3A7D80;
  --cat-gallery:   #6E5A8A;
  --cat-arc:       #4F7D54;
  --cat-welcome:   #B5904E;
  --cat-emergency: #A1424A;
  --cat-phyllis:   #7A5AA0;

  /* ---- Community assets (set by theme/theme.<slug>.css) ---- */
  --c-logo: none;
  --c-hero: none;

  /* ---- Typography ---- */
  --ff-display: "Fraunces", Georgia, serif;
  --ff-body:    "Inter", system-ui, "Segoe UI", sans-serif;
  --text-scale: 1;
  /* Kiosk-scale type: a 32" panel is read standing, 2–3 ft away — body never
     drops below 24px, tile labels sit in the low 30s. */
  --fs-hero:    calc(clamp(48px, 6.0vw, 96px) * var(--text-scale));
  --fs-h1:      calc(clamp(36px, 4.4vw, 62px) * var(--text-scale));
  --fs-h2:      calc(clamp(28px, 3.2vw, 46px) * var(--text-scale));
  --fs-tile:    calc(clamp(26px, 2.6vw, 38px) * var(--text-scale));
  --fs-button:  calc(clamp(24px, 2.2vw, 34px) * var(--text-scale));
  --fs-body-lg: calc(clamp(25px, 2.1vw, 33px) * var(--text-scale));
  --fs-body:    calc(clamp(24px, 1.9vw, 30px) * var(--text-scale));
  --fs-caption: calc(clamp(19px, 1.5vw, 24px) * var(--text-scale));
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.5;
  --ls-tight: -0.01em; --ls-caps: 0.14em;

  /* ---- Spacing / radii / elevation ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --radius-xl:26px; --radius-pill:999px;
  --elev-1: 0 2px 6px rgba(22,30,45,.05);
  --elev-2: 0 12px 30px rgba(22,30,45,.08), 0 2px 6px rgba(22,30,45,.05);
  --elev-3: 0 20px 48px rgba(22,30,45,.13), 0 3px 8px rgba(22,30,45,.06);
  --elev-4: 0 24px 60px rgba(100,24,38,.30);
  --tap-min:140px; --tile-min:200px; --ring-w:4px;

  /* ---- Motion ---- */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-nav:400ms; --dur-screensaver:600ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-nav: cubic-bezier(.32,.72,.28,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  color-scheme: light;
}

/* ---- Large Text accessibility mode (×1.25 across the whole scale) ---- */
[data-text="large"]{ --text-scale: 1.25; }

/* ---- HIGH CONTRAST accessibility mode (all text pairs >= 7:1) ---- */
[data-theme="high-contrast"]{
  --surface:   #FFFFFF;
  --surface-2: #FFFFFF;
  --hairline:  #1A2730;
  --ink:       #08131A;
  --ink-soft:  #243038;
  --ink-faint: #243038;
  --on-brand:  #FFFFFF;

  --brand:     #5C1421;
  --brand-2:   #4A0F1A;
  --brand-bright: #5C1421;
  --brand-glow: rgba(0,0,0,0);
  --brand-soft-border: #08131A;
  --gold:      #6E5527;
  --gold-soft: #FFE9C4;

  --app-bg:    #FFFFFF;
  --chip:      #FFFFFF;
  --chip-border:#08131A;
  --card-border:#08131A;

  --success:   #35543A;
  --warn:      #6E4600;
  --warn-fill: #F4A100;
  --danger:    #7A0E18;
  --focus:         #08131A;
  --focus-contrast:#FFFFFF;

  --cat-portal:#5C1421; --cat-amenities:#8A3E22; --cat-reserve:#6E5527; --cat-pool:#1E545C;
  --cat-events:#5E3D53; --cat-news:#5E3D53; --cat-map:#3D5536; --cat-docs:#2A4162;
  --cat-contact:#26565A; --cat-gallery:#4B3D63; --cat-arc:#35543A; --cat-welcome:#6E5527;
  --cat-emergency:#7A1220; --cat-phyllis:#53377A;

  --elev-1:0 0 0 2px #08131A; --elev-2:0 0 0 3px #08131A;
  --elev-3:0 0 0 3px #08131A; --elev-4:0 0 0 4px #08131A;
}
[data-theme="high-contrast"] .tile,
[data-theme="high-contrast"] .card{ border:3px solid var(--ink); }
[data-theme="high-contrast"] .btn--primary{ background:var(--brand); color:#fff; border:3px solid var(--ink); }
[data-theme="high-contrast"] .btn--secondary{ border:4px solid var(--ink); color:var(--ink); }

/* ---- Global reduced-motion fallback ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  /* The universal selector doesn't reach the View Transition snapshot layer. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}