/* =============================================================================
   Curaçao Fascinating Tours — design tokens (02_design_system.md §3, D7)
   One file, every surface: public, portal, admin, media. Loaded AFTER
   bootstrap.min.css 5.3.8 (D28): --cft-* per [data-bs-theme], then mapped onto
   Bootstrap's --bs-* variables so Bootstrap components follow the same values.
   The brand refresh = new values here + logo assets. Nothing else changes.
   Checked by docs/design/tools/contrast.py (every pair AA) and the dataviz
   validator (chart series). Never use a raw hex outside this file.
   ============================================================================= */

:root, [data-bs-theme="light"] {
  /* Surfaces — the beige of the current brand */
  --cft-bg: #fbf7ee;            /* paper */
  --cft-surface: #fffdf8;       /* cards, panels, tables */
  --cft-surface-2: #f2ead6;     /* paper-deep: raised, zebra, inputs on bg */
  --cft-border: #e3d9c2;        /* hairlines (decorative) */
  --cft-border-strong: #8f8670; /* input borders, dividers that carry meaning */
  --cft-scrim: rgba(18, 39, 31, .42);

  /* Ink — the green of the current brand */
  --cft-ink: #12271f;
  --cft-muted: #4d5c54;
  --cft-link: #0e6b63;          /* teal */
  --cft-link-rgb: 14, 107, 99;

  /* Actions */
  --cft-primary: #12271f;       /* green buttons, active nav */
  --cft-primary-rgb: 18, 39, 31;
  --cft-primary-hover: #1f3d31;
  --cft-on-primary: #fbf7ee;
  --cft-accent: #d4af37;        /* gold: Book now, the one loud action per page */
  --cft-accent-hover: #c39f2c;
  --cft-on-accent: #12271f;
  --cft-accent-text: #6b5410;   /* gold as text (gold itself fails as text) */
  --cft-soft: #e7efe9;          /* selected rows, active nav background */
  --cft-soft-ink: #12271f;

  /* Status — reserved, always with an icon + label */
  --cft-success: #0b5c55;  --cft-success-bg: #dcefe9;
  --cft-warning: #6b5410;  --cft-warning-bg: #f6ebc6;
  --cft-danger:  #a63b26;  --cft-danger-bg:  #f9e3dc;
  --cft-info:    #2b5480;  --cft-info-bg:    #e2ebf5;
  --cft-focus: #0e6b63;

  /* Charts — fixed order, never cycled; text never wears these.
     Validated with the dataviz validator per theme (components.html, bottom). */
  --cft-chart-1: #008a7a;  /* teal  */
  --cft-chart-2: #d0602e;  /* coral */
  --cft-chart-3: #3a64c0;  /* blue  */
  --cft-chart-4: #a77c00;  /* gold  */
  --cft-chart-grid: #ebe3cf;
  /* Currency is an entity, so it keeps its colour everywhere (D8) */
  --cft-usd: var(--cft-chart-1);
  --cft-eur: var(--cft-chart-3);

  /* Public footer (light only, D29): brand green band */
  --cft-footer-bg: #12271f;
  --cft-footer-ink: #f2ead6;
  --cft-footer-accent: #d4af37;
  --cft-on-photo: #ffffff;       /* text on hero photos, always over the dark shade */

  /* Sign-in backdrop (1.0.4, signin/_backdrop.html): Punda by day */
  --cft-bd-sky-top: #f3ead3;
  --cft-bd-sky-low: #fbf7ee;
  --cft-bd-sun: #e2c565;
  --cft-bd-far: #c9d8cf;
  --cft-bd-bridge: #8fa89c;
  --cft-bd-house: #1f3d31;
  --cft-bd-win: #f2ead6;
  --cft-bd-sea-top: #9fcfc5;
  --cft-bd-sea-low: #3f8f84;
  --cft-bd-wave: #fffdf8;
  --cft-bd-leaf: #0e6b63;

  --cft-shadow: 0 1px 2px rgba(18, 39, 31, .05), 0 1px 3px rgba(18, 39, 31, .07);
  --cft-shadow-lg: 0 14px 34px -14px rgba(18, 39, 31, .28);
  color-scheme: light;
}

[data-bs-theme="dark"] {
  /* Grey-green, low chroma (Gregory, 2026-10-19: the first dark green was too
     intense for long sessions). Hue stays green; saturation is near grey. */
  --cft-bg: #151917;
  --cft-surface: #1c211e;
  --cft-surface-2: #252b27;
  --cft-border: #333b36;
  --cft-border-strong: #7a847e;
  --cft-scrim: rgba(0, 0, 0, .6);

  --cft-ink: #ece7dc;
  --cft-muted: #a9b1ac;
  --cft-link: #7fc3b8;
  --cft-link-rgb: 127, 195, 184;

  /* On dark the green button would vanish: gold leads instead */
  --cft-primary: #d4af37;
  --cft-primary-rgb: 212, 175, 55;
  --cft-primary-hover: #e0c158;
  --cft-on-primary: #12271f;
  --cft-accent: #d4af37;
  --cft-accent-hover: #e0c158;
  --cft-on-accent: #12271f;
  --cft-accent-text: #e2c565;
  --cft-soft: #2b3430;
  --cft-soft-ink: #ece7dc;

  --cft-success: #8fcfc3;  --cft-success-bg: #213430;
  --cft-warning: #e3c977;  --cft-warning-bg: #36301f;
  --cft-danger:  #f0a491;  --cft-danger-bg:  #3d2622;
  --cft-info:    #a3c3e6;  --cft-info-bg:    #222d38;
  --cft-focus: #7fc3b8;

  --cft-chart-1: #1c9a8a;
  --cft-chart-2: #d86c46;
  --cft-chart-3: #6890e4;
  --cft-chart-4: #b48e16;
  --cft-chart-grid: #2c3430;

  /* Sign-in backdrop: Punda at night, the windows lit */
  --cft-bd-sky-top: #0d1110;
  --cft-bd-sky-low: #1a221e;
  --cft-bd-sun: #e2c565;
  --cft-bd-far: #26302b;
  --cft-bd-bridge: #55635c;
  --cft-bd-house: #0b0f0d;
  --cft-bd-win: #d4af37;
  --cft-bd-sea-top: #163d38;
  --cft-bd-sea-low: #0b1513;
  --cft-bd-wave: #7fc3b8;
  --cft-bd-leaf: #2b3430;

  --cft-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --cft-shadow-lg: 0 16px 40px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ── Map onto Bootstrap 5.3.8 (both modes) ─────────────────────────────────── */
[data-bs-theme] {
  --bs-body-bg: var(--cft-bg);
  --bs-body-color: var(--cft-ink);
  --bs-body-font-family: var(--cft-sans);
  --bs-font-monospace: var(--cft-mono);
  --bs-emphasis-color: var(--cft-ink);
  --bs-heading-color: var(--cft-ink);
  --bs-secondary-color: var(--cft-muted);
  --bs-secondary-bg: var(--cft-surface-2);
  --bs-tertiary-color: var(--cft-muted);
  --bs-tertiary-bg: var(--cft-surface-2);
  --bs-border-color: var(--cft-border);
  --bs-border-color-translucent: var(--cft-border);
  --bs-link-color: var(--cft-link);
  --bs-link-color-rgb: var(--cft-link-rgb);
  --bs-link-hover-color: var(--cft-link);
  --bs-link-hover-color-rgb: var(--cft-link-rgb);
  --bs-primary: var(--cft-primary);
  --bs-primary-rgb: var(--cft-primary-rgb);
  --bs-primary-bg-subtle: var(--cft-soft);
  --bs-primary-text-emphasis: var(--cft-soft-ink);
  --bs-success: var(--cft-success);
  --bs-success-bg-subtle: var(--cft-success-bg);
  --bs-warning: var(--cft-warning);
  --bs-warning-bg-subtle: var(--cft-warning-bg);
  --bs-danger: var(--cft-danger);
  --bs-danger-bg-subtle: var(--cft-danger-bg);
  --bs-info: var(--cft-info);
  --bs-info-bg-subtle: var(--cft-info-bg);
  --bs-code-color: var(--cft-ink);
  --bs-focus-ring-color: color-mix(in srgb, var(--cft-focus) 40%, transparent);
  --bs-border-radius: var(--cft-r-md);
  --bs-border-radius-sm: var(--cft-r-sm);
  --bs-border-radius-lg: var(--cft-r-lg);
  --bs-border-radius-pill: var(--cft-r-pill);
  --bs-box-shadow-sm: var(--cft-shadow);
  --bs-box-shadow-lg: var(--cft-shadow-lg);
}
/* Theme-independent */
:root {
  --cft-serif: ui-serif, Georgia, "Times New Roman", serif;  /* headings, brand voice */
  --cft-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cft-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Type scale (rem, 16px base) */
  --cft-fs-xs: .75rem; --cft-fs-sm: .875rem; --cft-fs-md: 1rem; --cft-fs-lg: 1.125rem;
  --cft-fs-xl: 1.375rem; --cft-fs-2xl: 1.75rem; --cft-fs-3xl: 2.25rem; --cft-fs-hero: clamp(2rem, 5vw, 3.5rem);

  /* Spacing (4px grid) */
  --cft-s1: 4px; --cft-s2: 8px; --cft-s3: 12px; --cft-s4: 16px; --cft-s5: 20px;
  --cft-s6: 24px; --cft-s8: 32px; --cft-s10: 40px; --cft-s12: 48px; --cft-s16: 64px;

  --cft-r-sm: 6px; --cft-r-md: 10px; --cft-r-lg: 14px; --cft-r-pill: 999px;

  --cft-ease: cubic-bezier(.2, .7, .2, 1);
  --cft-dur: .2s;

  /* Layout */
  --cft-gutter: 16px;          /* phone side gutter */
  --cft-content: 1200px;       /* public max width */
  --cft-sidebar: 248px;        /* admin/portal sidebar */
  --cft-rail: 64px;            /* tablet icon rail */
  --cft-topbar: 56px;
  --cft-tabbar: 64px;          /* phone bottom bar (portal, media) */
}
@media (min-width: 768px) { :root { --cft-gutter: 24px; } }
@media (prefers-reduced-motion: reduce) { :root { --cft-dur: 0s; } }