/* ==========================================================================
   Casa do Padrão — design tokens + shared components

   Token names deliberately match the Il Gattopardo and Casa Ramires design
   systems, so components can move between the sibling brands without a
   rename. Only the values differ: a portolan chart and a brass instrument
   instead of Sicilian cream or Portuguese limewash.
   ========================================================================== */

:root {
  /* Light only, and `only` is load bearing: plain `light` still lets Chrome's
     Auto Dark Theme force-invert the whole chart-paper palette for the many
     Android users on a dark system theme. */
  color-scheme: only light;

  /* ── palette ─────────────────────────────────────────────── */
  --c-bg:            #f0e9da;   /* aged chart paper */
  --c-surface:       #fffdf7;
  --c-card:          #e5dcc7;
  --c-text:          #17232a;   /* wet slate */
  --c-text-body:     #414e55;
  --c-text-muted:    #7b858c;
  --c-label:         #545f66;
  --c-accent:        #1b4a63;   /* Atlantic navy */
  --c-accent-dark:   #123646;
  /* Navy as TEXT (eyebrows, inline links). Identical to --c-accent here, and
     separate for the same reason Gattopardo keeps the two apart: one colour
     cannot both carry cream button text and read as type on a coloured
     ground. Use this for accent-coloured type, --c-accent for anything type
     sits on top of. */
  --c-accent-text:   #1b4a63;
  --c-gold:          #b8873c;   /* brass */
  --c-cream:         #f6f0e2;
  --c-ink:           #101c23;
  --c-dark:          #0e1a21;   /* deep water */
  --c-border:        #cdc3ad;
  --c-border-dot:    #bcb29c;
  --c-hairline:      rgba(23,35,42,.13);
  --c-placeholder:   #a6a294;
  --c-err:           #b0382c;
  --c-footer:        #0a141a;
  --c-footer-text:   #94a0a2;
  --c-footer-dim:    #6a7477;

  /* ── typography ──────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 11px;   /* uppercase eyebrow / field label */
  --fs-meta:    12px;
  --fs-pill:    13.5px; /* radio pill text */
  --fs-body:    15px;   /* input / body */
  --fs-lead:    17px;

  --ls-eyebrow: .16em;  /* field labels */
  --ls-wide:    .22em;  /* section eyebrows */
  --ls-btn:     .1em;

  /* ── spacing scale (vertical rhythm) ─────────────────────────
     The whole scale, same steps and same names as Gattopardo. Reach for a
     step rather than typing a number: a page that invents its own 20px, 26px
     and 34px is a page whose rhythm drifts away from every other page. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-label: 9px;      /* label → control */
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-field: 22px;     /* control → next label (form rhythm) */
  --sp-5: 28px;
  --sp-6: 36px;
  --sp-7: 44px;
  --sp-8: 56px;
  --sp-9: 80px;

  /* ── radii ───────────────────────────────────────────────── */
  --radius-sm:   2px;   /* inputs, buttons */
  --radius-img:  3px;
  --radius-card: 4px;
  --radius-pill: 30px;

  /* ── layout ──────────────────────────────────────────────────
     --bp-stack is the point the purchase page drops to one column.
     --w-page is the reading container: the width of a page of prose with its
     figures, used by land.html. The nav's own container is wider (1200px, in
     chrome.css) because it carries five links and a button. */
  --bp-stack: 1040px;
  --w-page:   860px;
}

/* ==========================================================================
   NIGHT. Two tiers, set by templates/_theme_init.html from the visitor's clock:
   19:00 gives `[data-theme="dark"]`, 23:00 adds `[data-night="late"]`.

   ── THE SCHEME FLIPS HERE AND NEVER ON :root ─────────────────────────────
   `:root` keeps `color-scheme: only light` and this block declares
   `color-scheme: dark`. That combination is deliberate and reversing it breaks one
   of two things. `only light` on the default is the actual opt out from Chrome's
   Auto Dark Theme, which otherwise force-inverts the whole chart-paper palette for
   Android users on a dark system theme, and it is the reason a light page here has
   never been mangled. Declaring `dark` on this selector is what tells the browser
   the page really is dark when WE say so, so form controls, scrollbars and the
   caret follow. Weaken :root to plain `light` and Chrome starts inverting again.

   ── WHY THIS IS TOKENS ONLY, WITH NO `filter:` ANYWHERE ──────────────────
   A `filter: invert()` on a wrapper would be one line and would ruin two things
   that must never inch toward dark:

     THE MAP. On a map colour is DATA, not styling. Inverted, the sea and the land
     change places, so a page that dims the map is a page that lies about where the
     coast is. `/coast-map` is its own document with its own four opt outs, the
     land page's <iframe> carries an inline `color-scheme: only light`, and
     cascais.svg and portugal-locator.svg are referenced with <img>, which cannot
     see this stylesheet at all. A filter would reach all three anyway.

     THE CERTIFICATE. `_cert.html` hardcodes `background:#fff` and every ink it
     uses, because it is a picture of a piece of PAPER. Paper is not dark at night.
     It reads no token here, so nothing below can touch it, and a filter would.

   So: no filters, ever, and `test_dark_mode_never_uses_a_filter` enforces it.

   ── CONTRAST ─────────────────────────────────────────────────────────────
   The navy that carries cream button text in daylight is 2.3:1 as TYPE on the
   night ground, which is why `--c-accent` and `--c-accent-text` diverge here and
   are identical in the light palette. Same split, same reason, as the sibling.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  /* The evening: deep water rather than black. The brand's own --c-dark is
     #0e1a21, so night is the palette the footer and the voyage band already use,
     brought up to the whole page. */
  --c-bg:          #0e1a21;
  --c-surface:     #16242c;
  --c-card:        #172830;
  --c-text:        #e8e0cf;   /* the cream that was light-on-dark in daylight */
  --c-text-body:   #bcc4c6;
  --c-text-muted:  #8e9a9d;   /* 4.9:1 on --c-bg */
  --c-label:       #9aa6a9;
  --c-accent:      #2b6a89;   /* lifted, so cream text on it still holds */
  --c-accent-dark: #1b4a63;
  --c-accent-text: #7fb8d4;   /* navy as TYPE, lifted to 6.4:1 */
  --c-gold:        #cfa055;   /* brass lifted off the dark ground */
  --c-border:      #293a43;
  --c-border-dot:  #35474f;
  --c-hairline:    rgba(232,224,207,.14);
  --c-placeholder: #6a767a;
  --c-err:         #e08579;
  /* The footer was already near-black in daylight. Against a dark page it needs to
     separate from it rather than merge, so it goes one step LIGHTER, not darker. */
  --c-footer:      #16242c;
  --c-footer-text: #a8b2b4;
  --c-footer-dim:  #7c868a;
}

/* Late: 23:00 to 07:00. Dimmer, for a room with the lights off. Only the values
   that need to move are restated, so the evening tier stays the single definition
   of everything else. */
[data-theme="dark"][data-night="late"] {
  --c-bg:          #080f14;
  --c-surface:     #101c22;
  --c-card:        #111f26;
  --c-text:        #d8d0bf;
  --c-text-body:   #a8b0b2;
  --c-text-muted:  #7f8b8e;
  --c-gold:        #c0954f;
  --c-border:      #1f2d34;
  --c-hairline:    rgba(216,208,191,.12);
  --c-footer:      #101c22;
}

/* ==========================================================================
   Shared components
   ========================================================================== */

.divider { border: none; border-top: 1.5px solid var(--c-hairline); margin: 18px 0; }

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: var(--sp-3);
}

.btn {
  display: inline-block;
  text-decoration: none;
  background: var(--c-accent);
  color: var(--c-cream);
  padding: 16px 34px;
  border: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.btn--ghost { background: none; color: var(--c-accent); }
.btn--ghost:hover { background: var(--c-accent); color: var(--c-cream); }

/* ── the armillary sphere ────────────────────────────────────
   Declared once per page as an SVG <symbol> and referenced with <use>, so
   currentColor still resolves per reference and there is exactly one copy
   of the geometry. */
.esfera-mark { display: block; width: auto; height: 54px; margin: 0 auto 18px; }
/* There was an .esfera-watermark here. It went unused the moment the opening
   pitch switched to the Portugal outline, and the sibling Gattopardo project
   has a regression test specifically because leftover rules like it silently
   restyle things later. Removed rather than left to rot. */

/* ── mainland Portugal outline ───────────────────────────────
   static/svg/portugal.svg, generated from Natural Earth 1:10m (public domain)
   by tools/make_portugal_svg.py. Used the way Il Gattopardo uses its Sicily
   outline: as a faint gold backdrop behind a section, never as a foreground
   graphic competing with the type.

   Referenced with <img>, not inline, because the file carries its own fill and
   nothing needs to recolour it per instance. Always inside a positioned
   parent, and always with the wrapper handling placement so the aspect ratio
   is never squashed. */
.portugal-outline { display: block; width: 100%; height: auto; }

.portugal-watermark {
  position: absolute;
  pointer-events: none;
  opacity: .10;
  z-index: 0;
}
/* On a dark ground the gold reads at a lower opacity than it does on paper. */
.portugal-watermark--dark { opacity: .07; }
/* At night the WHOLE page is a dark ground, so the plain variant takes the same
   value the modifier already established for that case. Not a new number: .07 is
   what the sections with dark photographic grounds have always used, and this is the
   same condition arriving by clock rather than by section.

   The IMAGE is untouched, only the wrapper's opacity. `portugal.svg` is referenced
   with <img> and cannot see this stylesheet, and no filter is involved, which is the
   rule that keeps the map safe on the land page. */
[data-theme="dark"] .portugal-watermark { opacity: .07; }

/* Small inline emblem, for sitting beside a heading or an eyebrow. */
.portugal-emblem { display: inline-block; width: auto; vertical-align: middle; }

/* A dashed rule, echoing a course plotted on a chart. */
.rule-rope {
  border: none;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--c-gold) 0 6px, transparent 6px 12px);
  opacity: .55;
  margin: 0 auto;
  width: 90px;
}