/* Strategyco design tokens. Shapes after the MIT-licensed Aether kit (pills, soft depth), colours solid:
   Bone is the ground, white panes sit on it, Midnight is ink and the one accent. */
:root {
  --bone: #F2F1EE;
  --midnight: #0F1B2D;

  --bg: var(--bone);
  --surface: #FFFFFF;
  --surface-sunken: #F8F7F4;
  --surface-hover: #F4F3EF;
  --surface-today: #E9EBF0;   /* today's column in the planner */
  --ink: var(--midnight);
  --ink-inverse: #F7F6F3;
  /* Midnight's own steps, for the inverted top bar and the mobile tab bar. */
  --midnight-raised: #1E2A3F; --midnight-hover: #26344D; --midnight-sunken: #1A2639; --midnight-line: #2C3950; --midnight-focus: #4A5A78;
  --ink-inverse-muted: #A7AFBD; --ink-inverse-faint: #8B95A6;
  --rose-on-dark: #F4A6A0; /* danger text on midnight, 4.5:1 or better */
  --danger-on-rose: #FFFFFF; /* armed danger action: 4.67:1 on --rose */
  --control-bar: 36px;
  --ink-2: #3B4658;
  --muted: #5A6170;
  --faint: #676D7A;   /* ≥ 4.5:1 on white and on Bone */
  --line: #E8E5DE;
  --line-strong: #D8D4CB;
  --control-line: #918D83;   /* form control edges: ≥ 3:1 on white and sunken */
  --selection: #D6DCE8;
  --scrollbar: #CFCBC2;

  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --bevel-pressed: inset 0 1px 2px rgba(15, 27, 45, 0.10);
  --shadow-resting: 0 1px 2px rgba(15, 27, 45, 0.05), 0 4px 12px -6px rgba(15, 27, 45, 0.10);
  --shadow-raised: 0 1px 2px rgba(15, 27, 45, 0.05), 0 10px 26px -14px rgba(15, 27, 45, 0.22);
  --shadow-ink: 0 6px 14px -6px rgba(15, 27, 45, 0.55);
  --shadow-ink-soft: 0 4px 10px -4px rgba(15, 27, 45, 0.45);
  --ring: 0 0 0 3px rgba(15, 27, 45, 0.16);
  --focus: #2563D9;   /* focus outline: ≥ 3:1 on Bone and white */
  --focus-on-dark: #9CC1FF; /* focus outline on the Midnight top bar */
  --overlay: rgba(15, 27, 45, 0.32);
  /* Soft edges and glows built from the ink, by depth: a control's edge, a pressed control, a
     lifted pane, a hovering primary button, a drawer over the page. */
  --ink-edge: rgba(15, 27, 45, 0.3); --ink-glow-soft: rgba(15, 27, 45, 0.12); --ink-glow: rgba(15, 27, 45, 0.25);
  --shadow-control: 0 2px 6px var(--ink-glow);
  --shadow-logo: 0 0 0 1px var(--line), 0 1px 2px var(--ink-glow-soft);
  --shadow-primary-hover: 0 10px 22px -8px rgba(15, 27, 45, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-drawer: 0 24px 48px -20px rgba(15, 27, 45, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --shadow-sheet: 0 30px 80px -24px rgba(15, 27, 45, 0.4);
  --shadow-bar: 0 2px 6px -2px rgba(15, 27, 45, 0.35); --shadow-bar-hover: 0 6px 14px -6px rgba(15, 27, 45, 0.5);
  --shadow-guest-card: 0 18px 50px rgba(15, 27, 45, 0.16);
  --ring-on-dark: 0 0 0 3px rgba(247, 246, 243, 0.12);
  /* The inverted ink as a veil, on a photo or the midnight bar. */
  --ink-inverse-veil: rgba(247, 246, 243, 0.9); --ink-inverse-glass: rgba(247, 246, 243, 0.14); --ink-inverse-glass-line: rgba(247, 246, 243, 0.35); --bone-veil: rgba(242, 241, 238, 0.45);
  --photo-shade: rgba(15, 27, 45, 0.45); --photo-shade-thin: rgba(15, 27, 45, 0.1); --photo-shade-deep: rgba(15, 27, 45, 0.72);
  --planner-shade: rgba(0, 0, 0, 0.18);
  /* Paper: what prints is ink on white with grey rules, whatever the screen's theme. */
  --paper: #FFFFFF; --paper-ink: #000000; --paper-rule: #CCCCCC;

  /* Solid accents: a strong fill for marks and bars, a pale fill for chips and notices. */
  --blue: #2563D9;    --blue-tint: #E3EBFB;   --blue-ink: #1D4FAE;
  --orange: #C2551B;  --orange-tint: #FBE8DA; --orange-ink: #A84B17; --orange-line: #F2D2BA;
  --green: #1E7F4F;   --green-tint: #DDF1E5;  --green-ink: #1A6F45;
  /* The four action colours (docs/manual-de-marca.md): the same everywhere, never paled. Green done,
     yellow under way, orange to do, red blocked. Shown as vivid text or as a full bubble with white
     text (midnight on yellow). */
  --action-green: #1E7F4F; --action-yellow: #E8A800; --action-orange: #C2551B; --action-red: #C8372F;
  /* The yellow as text: the same hue, deep enough to read on Bone. */
  --action-yellow-text: #9A6F00;
  --on-action: #FFFFFF; --on-action-yellow: var(--midnight);
  /* The three states of a progress ring: ready, almost there, missing. */
  --state-ready: var(--action-green); --state-going: var(--action-yellow); --state-todo: var(--action-orange); --state-missing: var(--action-red);
  --rose: var(--action-red);    --rose-tint: #F9E2DF;   --rose-ink: #A3302A;   --rose-line: #F0CBC6;
  --lilac: #6B52CC;   --lilac-tint: #EAE5F8;  --lilac-ink: #4F3AA6;
  /* Channel brand colours: each OTA's own, direct bookings ours. */
  /* Agoda: the purple of its official primary palette (agoda.com/press, Logo Guidelines: PMS 2069C), 4.8:1 with the light ink. */
  --ch-booking: #003B95; --ch-airbnb: #FF385C; --ch-expedia: #FDDB32; --ch-agoda: #AF38B1; --ch-vrbo: #245ABC; --ch-google: #4285F4;
  --ch-direct: var(--midnight);
  /* Ink on each channel fill, chosen for 4.5:1 contrast: light on the dark fills, midnight on the bright ones. */
  --ch-booking-ink: var(--ink-inverse); --ch-airbnb-ink: var(--midnight); --ch-expedia-ink: var(--midnight); --ch-agoda-ink: var(--ink-inverse);
  --ch-vrbo-ink: var(--ink-inverse); --ch-google-ink: var(--midnight); --ch-direct-ink: var(--ink-inverse);
  --slate: #5B6577;   --slate-tint: #ECEAE5;  --slate-ink: #3F4858;

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Two radii and a pill: panes, things inside panes, controls. */
  --radius: 18px;
  --radius-inner: 12px;
  --r-xs: 8px;
  --pill: 9999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --spring: cubic-bezier(0.5, 1.6, 0.4, 1);
  --fast: 140ms var(--ease);
  --med: 220ms var(--ease);

  --sidebar: 248px;
  --header: 56px;
  --gap: 12px;
  /* One spacing scale (gaps, paddings, margins) and one type scale: every size in the styles is one of these. */
  --space-0: 2px; --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px; --space-7: 40px;
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 34px;   /* between blocks, both directions */
  --pad: 16px;   /* inside every pane */
  color-scheme: light;
}