/* ARCO Café — tokens & interaction states.
   GENERATED from ds/arco/tokens.json (ARCO Design System v18, version 1793104974-3ccc).
   Do not edit values by hand: change tokens.json in the design system, re-install, regenerate.
   State rules (hover / focus / active / disabled / mobile card rows) follow the DS README "States"
   section and the Header, Hero, Button, MenuCard, BranchCard, Footer, SocialPost component docs. */

/* Season (SeasonCollectionVF-TRIAL.ttf, weight 300 900): one @font-face per artboard, in its <helmet>, pointing at the uploaded copy of
   ds/arco/fonts/SeasonCollectionVF-TRIAL.ttf (byte-identical to the design system file). Not declared here to avoid a duplicate face. */

:root{
  --brand-burgundy:#5c251c;
  --brand-cream:#faf9f4;
  --brand-beige:#ebe5d9;
  --brand-green:#355146;
  --brand-slate:#667087;
  --brand-cyan:#a1faff;
  --brand-white:#ffffff;
  --brand-gold:#a69402;
  --cream:#faf9f4;
  --surface-sunken:#efede7;
  --paper:#ffffff;
  --espresso:#2a1410;
  --ink-on-dark:#ffffff;
  --maroon:#5c251c;
  --maroon-700:#5c2324;
  --rose:#966160;
  --rose-muted:#ac7e7d;
  --olive:#6e6530;
  --olive-700:#524b24;
  --border-subtle:#e0ddd7;
  --border-strong:#cbc6c0;
  --font-display-en:"Season", "Helvetica Neue", Arial, sans-serif;
  --font-body-en:"Season", "Helvetica Neue", Arial, sans-serif;
  --font-ui-en:"Season", "Helvetica Neue", Arial, sans-serif;
  --font-display-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-body-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-ui-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  --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;
  --space-10:128px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-xl:32px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(42,20,16,0.08);
  --shadow-md:0 8px 24px rgba(42,20,16,0.12);
  --shadow-lg:0 24px 48px rgba(42,20,16,0.18);
}

/* ---- Base ---- */
body{background:var(--cream)}
a{color:var(--maroon)}
a:hover{color:var(--maroon-700)}
/* Arrow glyph from Season (IBM Plex Sans Arabic has no U+2190) — DS README, Typography */
.arrow{font-family:var(--font-ui-en)}

/* ---- Focus (DS README, States): maroon ring 2px, offset 2px.
   Scoped to light surfaces; the espresso footer keeps the browser ring (no DS value for dark surfaces). ---- */
header a:focus-visible,header button:focus-visible,main a:focus-visible,main button:focus-visible,main [tabindex]:focus-visible{outline:2px solid var(--maroon)!important;outline-offset:2px}

/* ---- Button (components/Button) ---- */
.ac-btn-primary{transition:background .15s ease,box-shadow .15s ease,transform .1s ease}
.ac-btn-primary:hover{background:var(--maroon-700)!important;color:var(--ink-on-dark)!important;box-shadow:var(--shadow-md)!important}
.ac-btn-primary:active{background:var(--maroon-700)!important;transform:scale(.98)}
.ac-btn-primary[disabled]:hover,.ac-btn-primary[disabled]:active{box-shadow:none!important;transform:none}
.ac-btn-secondary{transition:border-color .15s ease}
.ac-btn-secondary:hover{border-color:var(--maroon)!important;color:var(--maroon)!important}
.ac-btn-ghost{transition:background .15s ease}
.ac-btn-ghost:hover{background:var(--surface-sunken)!important;color:var(--espresso)!important}
/* Hero ghost (components/Hero): text turns maroon */
.ac-hero-ghost:hover{color:var(--maroon)!important}

/* ---- Header (components/Header): active + hover = maroon underline ---- */
.ac-navlink:hover{color:var(--maroon)!important;border-color:var(--maroon)!important}
.ac-header{transition:box-shadow .15s ease}

/* ---- Cards (DS README, States; MenuCard / BranchCard): shadow-md -> shadow-lg ---- */
.ac-card{transition:box-shadow .2s ease,transform .2s ease}
.ac-card:hover{box-shadow:var(--shadow-lg)!important;transform:translateY(-2px)}
/* MenuCard CTA */
.ac-mcta:hover{background:var(--maroon)!important;color:var(--ink-on-dark)!important}
/* BranchCard link */
.ac-blink:hover{text-decoration:underline!important;color:var(--maroon)!important}

/* ---- Branch photos (BranchCard): photo + documented espresso→maroon overlay, text above ---- */
.ac-bmedia>:not(.ac-bimg):not(.ac-bov){position:relative}

/* ---- Footer (components/Footer) ---- */
.ac-flink:hover{color:var(--ink-on-dark)!important}

/* ---- SocialPost (components/SocialPost) decorative highlight ---- */
.ac-post{position:relative;overflow:hidden}
.ac-post::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 55%);pointer-events:none}
.ac-post>*{position:relative;z-index:1}

/* Header logo on mobile (components/Header): 32px under 768px */
@media (max-width:767px){.ac-logo{height:32px!important}}
/* English header uses the Latin wordmark (components/Header, locale en): 26px desktop, 20px mobile */
@media (max-width:767px){.ac-logo-en{height:20px!important}}

/* ---- Cards on mobile (DS decision 10): horizontal scroll row under 768px ---- */
@media (max-width:767px){
.ac-row{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-6);overscroll-behavior-x:contain;gap:var(--space-5)!important;padding-block:var(--space-5);margin-block:calc(-1 * var(--space-5))}
.ac-row-menu>article{flex:0 0 240px;scroll-snap-align:start}
.ac-row-branch>article{flex:0 0 260px;scroll-snap-align:start}
.ac-row-branch .ac-bstatus,.ac-row-branch .ac-blink{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
.ac-card,.ac-btn-primary,.ac-btn-secondary,.ac-btn-ghost,.ac-header{transition:none}
.ac-card:hover{transform:none}
.ac-btn-primary:active{transform:none}
}