/* ============================================================
   Base: loaded by both the public page and caja, before site.css or
   caja.css. Holds every custom property and only the rules both pages
   apply identically. Page-specific rules go in site.css / caja.css.
   ============================================================ */

/* Colour tokens. Dark is the default. The light theme (below) is set by
   data-theme="light" on <html>, from the script at the top of inc/head.php.
   The header, bottom nav, hero, lightbox, the map (a dark image, with its
   button and credit over it) and the overlay's close button, which sits
   on the dark backdrop, stay dark in both themes: they re-declare the dark
   palette here, so everything inside them keeps it. caja never sets the
   attribute, so it always has the dark values. */
:root,
:root[data-theme="light"] :is(.site-header, .bottom-nav, .hero, .lightbox, .legal-close, .map-box) {
  --c-bg: #0A0A0A;
  --c-surface: #141414;
  --c-surface-2: #111111;
  --c-surface-3: #0F0F0F;   /* tarifas: the other-rates rows */
  --c-band: rgba(20, 20, 20, .85);  /* novedades, horario, footer */
  --c-footer-bottom: transparent;   /* the copyright row */
  --c-frame: #000000;       /* behind the posters and the map image */
  --c-grid: rgba(255, 163, 23, .06);  /* the page's grid texture */
  --c-line: #2A2A2A;
  --c-line-soft: #1F1F1F;
  --c-line-card: #222222;   /* review card border */
  --c-line-faint: #1A1A1A;  /* between horario slots */
  --c-text: #F4F1EC;
  --c-text-legal: rgba(244, 241, 236, .82);   /* legal text */
  --c-text-review: rgba(244, 241, 236, .78);  /* review quotes */
  --c-text-svc: rgba(244, 241, 236, .75);     /* fisio card body */
  --c-text-muted: rgba(244, 241, 236, .7);
  --c-text-class: rgba(244, 241, 236, .68);   /* class descriptions, narrow */
  --c-text-sub: rgba(244, 241, 236, .6);      /* subheads, plan notes */
  --c-text-note: rgba(244, 241, 236, .55);    /* small print */
  --c-text-faint: rgba(244, 241, 236, .5);
  --c-strong: #FFFFFF;      /* hover text and fills, the benefits titles */
  --c-on-strong: #0A0A0A;
  --c-weekend: #F4F1EC;     /* horario weekend headers, wide */
  --c-on-weekend: #0A0A0A;
  --c-accent: #FFA317;      /* fills, borders, rules */
  --c-accent-text: #FFA317; /* orange text, outlined controls, focus */
  --c-accent-line: rgba(255, 163, 23, .25);
  --c-on-accent: #0A0A0A;
  --c-white: #FFFFFF;
  --c-text-hint: rgba(244, 241, 236, .65);  /* caja hints and captions */
  --c-error: #FF6B5B;
  --c-ok: #5BD08A;
}

/* Light: content light, chrome dark (see above). Body sections are white
   where the dark theme shows the grid and warm grey where it has a band.
   Orange stays the brand #FFA317 as a fill; as text it is the same hue
   (36°) darkened, the lightest that clears 4.5:1 on every light
   background here: 5.13 on white, 4.55 on #F3F1ED, 4.75 on #F7F6F3. */
:root[data-theme="light"] {
  --c-bg: #FFFFFF;
  --c-surface: #F7F6F3;
  --c-surface-2: #F7F6F3;
  --c-surface-3: #F3F1ED;
  --c-band: #F3F1ED;
  --c-footer-bottom: #F3F1ED;
  --c-frame: #E6E3DD;
  --c-grid: rgba(20, 20, 20, .045);
  --c-line: #D5D2CB;
  --c-line-soft: #E3E0DA;
  --c-line-card: #E3E0DA;
  --c-line-faint: #EAE7E1;
  --c-text: #141414;
  --c-text-legal: rgba(20, 20, 20, .84);
  --c-text-review: rgba(20, 20, 20, .8);
  --c-text-svc: rgba(20, 20, 20, .78);
  --c-text-muted: rgba(20, 20, 20, .74);
  --c-text-class: rgba(20, 20, 20, .72);
  --c-text-sub: rgba(20, 20, 20, .7);
  --c-text-note: rgba(20, 20, 20, .66);
  --c-text-faint: rgba(20, 20, 20, .64);
  --c-strong: #141414;
  --c-on-strong: #FFFFFF;
  --c-weekend: #141414;
  --c-on-weekend: #FFFFFF;
  --c-accent-text: #9E5F00;
}

/* The header and bottom nav let the page show through a little. Over the
   light page that turned them grey, so in light they are (nearly) opaque.
   Kept out of the dark-island rule above so the light values reach them. */
:root {
  --c-header-bg: rgba(10, 10, 10, .94);
  --c-nav-bg: rgba(10, 10, 10, .8);          /* with the blur */
  --c-nav-bg-solid: rgba(10, 10, 10, .97);   /* without it */
}
:root[data-theme="light"] {
  --c-header-bg: #0A0A0A;
  --c-nav-bg: rgba(10, 10, 10, .96);
  --c-nav-bg-solid: #0A0A0A;
}

/* Everything else. Sections added later should use these, not raw values. */
:root {
  /* Type */
  --f-body: Barlow, system-ui, sans-serif;
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --t-xs: .8125rem;   /* 13 */
  --t-sm: .875rem;    /* 14 */
  --t-base: 1rem;     /* 16 */
  --t-lg: 1.125rem;   /* 18 */
  --t-xl: 1.35rem;
  --t-2xl: clamp(1.6rem, 6vw, 2.6rem);
  --t-3xl: clamp(2.2rem, 7vw, 3.8rem);
  --lh-body: 1.55;
  --lh-tight: .95;
  --tracking-label: .2em;
  --tracking-nav: .08em;

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --section-pad: clamp(44px, 7vw, 88px);

  /* Layout */
  --max-w: 1180px;
  --gutter: 18px;
  --tap: 44px;
  --bar-h: 64px;
  --bottom-nav-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  --safe-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--c-bg); }
body { margin: 0; color: var(--c-text); }
a { color: var(--c-accent-text); }