/* Beglobber — design tokens.
   Palette: "Beglobber" (charcoal structure + Beglobber red accent). Adopted 2026-10-16 (owner
   decision) — see docs/brand-application.md and docs/owner-decisions.md. This supersedes the
   previous RUMBO LIBRE "Atlantic" ocean-azure palette: the marketing site now carries Beglobber's
   own brand, grounded in the live identity at beglobber.com — a red map-pin isologo (#D83348), a
   warm charcoal neutral and Manrope type.

   HOW IT WORKS: structure is a warm-neutral charcoal ramp; brand presence comes from the red
   ramp, used for the CTA, the pin, eyebrows, icon tiles, stat numbers, "more" links, focus and
   the brand rule. Hierarchy still comes from weight, not colour. A muted gold stays as a quiet
   third accent (warm tags, the footer endorsement). Do not invent a colour that is not here. */

:root {
  /* ---- Beglobber red — THE brand. Pin, CTA, eyebrows, accents, focus. Full ramp 50–900. ---- */
  --brand-50:  #FCECEE;   /* soft brand tint — eyebrow pills, icon tiles, focus ring, active */
  --brand-100: #F9D3D8;
  --brand-200: #F2A9B2;
  --brand-300: #E87884;
  --brand-400: #E0384C;   /* bright — the map-pin, bright accents */
  --brand-500: #D4283F;   /* BRAND red — rules, highlights (close to the live #D83348) */
  --brand-600: #C21F38;   /* PRIMARY button fill — white text on it meets AA (5.9:1) */
  --brand-700: #A81B31;   /* hover; brand text/links on white; "more →" */
  --brand-800: #8A1627;   /* deep — text on brand-50 tint, warm brand labels */
  --brand-900: #5E0F1B;

  /* Legacy brand names kept so any older reference keeps working. */
  --brand:   var(--brand-600);
  --brand-d: var(--brand-800);

  /* ---- Structure — a warm-neutral charcoal ramp. (Repoints the old --ocean-* names so the
     whole template recolours without per-file edits: azure structure becomes charcoal.) ---- */
  --ocean-50:  #F5F3F2;   /* soft section band, active states, info badges, menu/field tints */
  --ocean-100: #E9E5E3;
  --ocean-200: #D6D0CD;   /* hairline tints */
  --ocean-300: #B4ACA8;   /* hover borders */
  --ocean-400: #837A76;
  --ocean-500: #4E4744;   /* mid charcoal — structural accent, focus fallback */
  --ocean-600: #3B3532;   /* links, nav hover, small icons */
  --ocean-700: #2E2927;   /* strong structural text */
  --ocean-800: #231F1D;   /* DEEP — secondary button text, dark chips, section heads (AA on white) */
  --ocean-900: #181513;

  /* Legacy teal aliases — now hold charcoal, not teal (kept so platform code keeps working). */
  --teal:      var(--ocean-500);
  --teal-d:    var(--ocean-800);
  --teal-50:   var(--ocean-50);

  /* ---- Warm accent — a muted gold "sun/sand". Quiet third accent: warm tags, included/net
     labels, the footer endorsement on dark. Kept subordinate to the red. ---- */
  --amber:     #E0B169;   /* muted gold — highlights, footer "RUMBO LIBRE", warm tag edge */
  --amber-d:   #7A5A12;   /* text on amber; "net" labels; warm tag text */
  --amber-50:  #FBF1DD;   /* warm soft backgrounds, service "kind" tags, Included header */

  /* Warm surface — section bands, total band. */
  --sand:      #F5EFE3;

  /* Point accents and semantic states (errors/success stay distinct from the brand red). */
  --rose:      #A72F5C;   /* required asterisk, non-refundable states */
  --rose-50:   #F7E7EE;
  --red:       #D64545;
  --red-d:     #B42318;
  --green:     #2E7D43;   /* refundable / success */
  --green-50:  #E5F3E7;

  /* Text. Hierarchy comes from weight, not colour. */
  --ink:       #201C1B;   /* primary text — warm charcoal */
  --muted:     #5C5451;   /* secondary text */
  --faint:     #6E6562;   /* tertiary text, labels, metadata */
  --ink-deep:  #1B1715;   /* footer / dark bands — near-black warm charcoal */

  /* Lines. Hairline borders, flat cards. */
  --line:      #ECE8E6;
  --line-2:    #E3DDDA;
  /* Interactive-control boundary — meets WCAG 1.4.11 non-text contrast (3:1) on white. */
  --line-field: #8C827E;

  /* Elevation — only on genuinely floating elements. (Warm, neutral shadow.) */
  --shadow-pill:  0 1px 4px rgba(0, 0, 0, .05);
  --shadow-float: 0 12px 44px rgba(30, 20, 18, .16);

  /* Shape. */
  --r-pill: 999px;
  --r-card: 15px;
  --r-btn:  11px;

  /* Type. (Manrope stays — self-hosted, modern, and the site's own voice.) */
  --font-brand:  'Manrope', system-ui, sans-serif;       /* public surfaces, B2C */
  --font-ui:     'Hanken Grotesk', system-ui, sans-serif; /* dense B2B portal UI */
  --font-doc:    'Manrope', Arial, sans-serif;           /* emails and documents (Arial fallback) */
}

/* The RUMBO LIBRE wordmark is uppercase; the Beglobber wordmark is forced lowercase in .brand__name. */
.logo, .brand { letter-spacing: .02em; }

/* Accessible focus — the brand red. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}