/* ==========================================================================
   BEL-AIR DESIGN SYSTEM — TOKENS (BRD § 45.3, v3.7 DV-15: the white site)

   Colour logic
   ─ The page is white with near-black ink, like the barangay's old site.
   ─ Photographs keep a dark scrim over the photograph only; everything placed
     on a photograph (heroes, photo sections, captions) takes the light ink of
     the "on a photograph" scope at the end of this file.
   ─ The seal's blue is the civic action colour (primary buttons, links, the focus
     ring, the current item); gold is decoration only, never text on white.
   ========================================================================== */
:root {
  /* Ground (the names are the night palette's, so every rule re-themes from here) */
  --night: #FFFFFF;          /* page ground */
  --night-2: #EEF1F5;        /* alternate band, table head, footer */
  --panel: #F6F7F9;          /* cards, fields, tables */
  --panel-2: #EEF1F5;
  --ink: #14181F;            /* text — 16.9:1 on white, 15:1 on --night-2 */
  --ink-2: #3A4250;          /* secondary text — 9.9:1 on white */
  --ink-3: #444C59;          /* labels and captions — 7.6:1 on --night-2 (AAA) */
  --line: #E1E5EB;
  --line-strong: #767F8C;    /* control outlines — 4.1:1 on white */
  --white: #FFFFFF;
  --on-photo-ink: #F3EFE6;   /* text on a photograph's scrim */

  /* Light palette — glows only */
  --glow-gold: #FFD23F;
  --glow-amber: #F4A21A;
  --glow-teal: #2BB3A3;
  --glow-leaf: #7FD17F;
  --glow-sky: #6FB6F0;
  --glow-rose: #F08A7B;

  /* Official seal colours — civic actions */
  --blue: #0000FF;
  --blue-ink: #0000C2;
  --blue-light: #0000C2;    /* links: 11:1 on white (the "light" name is the dark palette's) */
  --on-blue: #FFFFFF;
  --yellow: #FFFF00;
  --gold: #FFD23F;          /* decoration only on white */
  --accent: var(--blue-ink);       /* accent text: current item, highlighted word */
  --accent-fill: var(--blue);      /* selected / current fill, with white text */

  /* Chart series (charts-defaults.js; WCAG 1.4.11 — bars at least 3 : 1 on white): the seal's blue ink (11 : 1) and a
     dark teal (5.3 : 1). Never the yellow or the light glows. */
  --chart-1: var(--blue-ink);
  --chart-2: #0B7A6E;

  /* Light washes used behind sections (CSS, not artwork) */
  --wash-gold: radial-gradient(60% 60% at 50% 50%, rgba(255, 210, 63, .22), transparent 70%);
  --wash-teal: radial-gradient(60% 60% at 50% 50%, rgba(43, 179, 163, .22), transparent 70%);
  --wash-leaf: radial-gradient(60% 60% at 50% 50%, rgba(127, 209, 127, .2), transparent 70%);
  --wash-sky: radial-gradient(60% 60% at 50% 50%, rgba(111, 182, 240, .2), transparent 70%);
  --grad-ribbon: linear-gradient(90deg, #2BB3A3, #7FD17F 50%, #FFD23F);

  /* Type */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;   /* headings, bold only (v3.7, DV-15) */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Readers are 13 to 80: nothing renders under 14 px, sentences never under 16 px, body copy is 18 px. */
  --t-xs: .875rem;          /* 14 px — capitals labels only */
  --t-sm: 1rem;             /* 16 px — captions, card copy */
  --t-base: 1.125rem;       /* 18 px — body */
  --t-lg: 1.375rem;
  --t-xl: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);      /* card titles (serif) */
  /* Display sizes are written in --u, a rem that does not grow with the text size control (A / A+ / A++
     set --ts and the root size, see site.css): display type is already large and must still fit a phone. */
  --ts: 1;
  --u: calc(1rem / var(--ts));
  /* The heading scale (BRD § 45.3 v3.7, DV-15): one look on every page. */
  --t-2xl: clamp(1.5 * var(--u), 1.3 * var(--u) + .8vw, 1.875 * var(--u));     /* section heading (h2) */
  --t-3xl: clamp(2 * var(--u), 1.6 * var(--u) + 1.8vw, 2.75 * var(--u));       /* page title (h1) */
  --t-sub: 1.25rem;                                                            /* sub-heading (h3), Inter 700 */
  --t-lede: 1.25rem;
  --t-hero: clamp(3.2 * var(--u), 1 * var(--u) + 10vw, 10 * var(--u));        /* the homepage name only */
  --lh-body: 1.6;
  --track-caps: .14em;

  /* Space, grid */
  --s-section: clamp(5rem, 3rem + 7vw, 11rem);
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --max: 92rem;
  --measure: 36rem;

  /* Motion — three levels */
  --d-micro: 220ms;
  --d-reveal: 800ms;
  --d-ambient: 12s;
  --ease-premium: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Surfaces */
  --r-ui: 4px;
  --r-photo: 6px;
  --hairline: 1px solid var(--line);
  --glass: #FFFFFF;          /* cards and panels: white with a line and a soft shadow */
  --glass-line: var(--line);
  --shadow-card: 0 1px 2px rgba(20, 24, 31, .06), 0 6px 18px rgba(20, 24, 31, .06);

  --z-nav: 50; --z-panel: 80; --z-cursor: 100; --z-loader: 120;

  /* Inner-page body (text, tables, forms): white (BRD v3.7, DV-15). Every text colour holds 7:1 on --paper-2. */
  --paper: var(--night);           /* page ground */
  --paper-2: var(--panel);         /* cards, fields, tables (glass on photographs) */
  --paper-3: var(--night-2);       /* alternate band, table head */
  --ink-d: var(--ink);             /* text, 15:1 on panel */
  --ink-d2: var(--ink-2);          /* secondary text, 11:1 */
  --ink-d3: var(--ink-3);          /* labels and captions, 7.8:1 on panel-2 */
  --line-d: var(--line);
  --line-d-strong: var(--line-strong);   /* field and control outlines, 3:1 */
  --link-d: var(--blue-light);     /* links, 8.6:1 on panel */
  --focus-d: var(--blue);          /* focus ring: seal blue (gold is 1.4:1 on white) */

  /* Status colours on white: dark text on a light tint of itself, the word always written, never colour alone.
     Each holds ≥ 7:1 on its tint. */
  --ok: #0F5A26;      --ok-bg: #E7F4EA;      /* approved, valid, completed */
  --wait: #6B4500;    --wait-bg: #FFF3D6;    /* pending, in review */
  --more: #7A3300;    --more-bg: #FFEBDD;    /* more needed, action required */
  --bad: #8F1414;     --bad-bg: #FDE8E8;     /* rejected, revoked, expired */
  --info: #0A3590;    --info-bg: #E7EEFF;    /* information, reminders */
  --alert: #0000FF;                                           /* emergency advisories: the seal blue, as on the homepage */
}

/* On a photograph (BRD v3.7, DV-15): a photo hero, a photo section, a caption on a photograph. The scrim stays,
   and everything inside takes the dark palette's light ink, glass and accents, exactly as before the white site. */
.hero, .page-hero:not(.page-hero--plain), .glance, .green, .day, .wipe__sticky, .wipe__cap, .afterdark, .cta, .panel,
.xcard .photo, .xcard__cap, .photo figcaption, .mega__feature .photo, .lightbox, .on-photo {
  --night: #070B14;
  --night-2: #0C1220;
  --panel: #121A2B;
  --panel-2: #192338;
  --ink: #F3EFE6;
  --ink-2: rgba(243, 239, 230, .86);
  --ink-3: rgba(243, 239, 230, .72);
  --line: rgba(243, 239, 230, .12);
  --line-strong: rgba(243, 239, 230, .45);
  --white: #FFFDF8;
  --blue-light: #8FB0FF;
  --accent: var(--gold);
  --accent-fill: var(--gold);
  --glass: rgba(12, 18, 32, .84);
  --glass-line: rgba(243, 239, 230, .14);
  --shadow-card: none;
  --paper: var(--night);
  --paper-2: var(--panel);
  --paper-3: var(--night-2);
  --ink-d: var(--ink);
  --ink-d2: var(--ink-2);
  --ink-d3: var(--ink-3);
  --line-d: var(--line);
  --line-d-strong: var(--line-strong);
  --link-d: var(--blue-light);
  --focus-d: var(--gold);
  color: var(--ink);
}