/* ==========================================================================
   The Island Restro & Bar: design tokens
   This is the ONLY file that defines colour values. Change a colour here
   and it updates everywhere (site.css and Bootstrap both read these tokens).
   ========================================================================== */

/* Fallback faces scaled to the web fonts' width and line metrics, so text
   does not reflow (and the page does not jump) when the web fonts arrive.
   Ratios were measured against Arial in Chromium. */
@font-face {
  font-family: "Oswald Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 76.4%;
  ascent-override: 155.8%;
  descent-override: 38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 102.6%;
  ascent-override: 104.3%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Kaushan Script Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 95%;
  ascent-override: 113.7%;
  descent-override: 39%;
  line-gap-override: 0%;
}

:root {
  /* ---- Palette (final) -------------------------------------------------- */
  --irb-ivory: #efe9dd;   /* page background, primary canvas */
  --irb-coffee: #4c312b;  /* text, headings, dark sections, footer */
  --irb-sand: #d6b08c;    /* surfaces, borders, alternating sections */
  --irb-brick: #a94134;   /* primary action, key accents */
  --irb-slate: #4e646e;   /* tags, dietary labels, secondary buttons */
  --irb-amber: #d99240;   /* decorative only; text on coffee only */
  --irb-white: #fff;

  /* Same palette as R, G, B triples for Bootstrap's *-rgb variables. */
  --irb-ivory-rgb: 239, 233, 221;
  --irb-coffee-rgb: 76, 49, 43;
  --irb-sand-rgb: 214, 176, 140;
  --irb-brick-rgb: 169, 65, 52;
  --irb-slate-rgb: 78, 100, 110;
  --irb-amber-rgb: 217, 146, 64;

  /* Photo overlays and shadows: coffee in both themes. */
  --irb-shade-rgb: 76, 49, 43;
  color-scheme: light;

  /* ---- Semantic roles (light context) -------------------------------- */
  --irb-bg: var(--irb-ivory);
  --irb-surface: var(--irb-sand);
  --irb-text: var(--irb-coffee);
  --irb-text-muted: var(--irb-coffee-80);
  --irb-rule: var(--irb-sand);
  --irb-rule-strong: var(--irb-coffee-25);
  --irb-focus: var(--irb-brick);

  /* ---- Typography ------------------------------------------------------ */
  --irb-font-display: "Oswald", "Oswald Fallback", "Arial Narrow", Arial, sans-serif;
  --irb-font-script: "Kaushan Script", "Kaushan Script Fallback", "Brush Script MT", cursive;
  --irb-font-body: "Manrope", "Manrope Fallback", "Segoe UI", Arial, sans-serif;
  --irb-fs-sm: 0.875rem;
  --irb-fs-base: 1rem;
  --irb-fs-md: 1.125rem;
  --irb-fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --irb-fs-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --irb-fs-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --irb-fs-3xl: clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem);
  --irb-fs-hero: clamp(2.9rem, 1.4rem + 6.2vw, 6.75rem);
  --irb-fs-label: 0.75rem;
  --irb-tracking-caps: 0.24em;
  --irb-tracking-display: 0.01em;

  /* ---- Space, shape, motion ------------------------------------------- */
  --irb-space-2: 0.5rem;
  --irb-space-3: 1rem;
  --irb-space-4: 1.5rem;
  --irb-space-5: 2.5rem;
  --irb-space-6: 4rem;
  --irb-space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --irb-gutter: 1rem;
  --irb-content-max: 1240px;
  --irb-radius-sm: 2px;
  --irb-radius: 4px;
  --irb-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --irb-duration: 220ms;
  --irb-header-h: 76px;

  /* ---- Bootstrap bridge: no default Bootstrap colours anywhere -------- */
  --bs-body-bg: var(--irb-ivory);
  --bs-body-bg-rgb: var(--irb-ivory-rgb);
  --bs-body-color: var(--irb-coffee);
  --bs-body-color-rgb: var(--irb-coffee-rgb);
  --bs-emphasis-color: var(--irb-coffee);
  --bs-emphasis-color-rgb: var(--irb-coffee-rgb);
  --bs-secondary-color: var(--irb-coffee-80);
  --bs-secondary-bg: var(--irb-sand);
  --bs-tertiary-bg: var(--irb-sand);
  --bs-heading-color: var(--irb-coffee);
  --bs-primary: var(--irb-brick);
  --bs-primary-rgb: var(--irb-brick-rgb);
  --bs-secondary: var(--irb-slate);
  --bs-secondary-rgb: var(--irb-slate-rgb);
  --bs-dark: var(--irb-coffee);
  --bs-dark-rgb: var(--irb-coffee-rgb);
  --bs-light: var(--irb-ivory);
  --bs-light-rgb: var(--irb-ivory-rgb);
  --bs-link-color: var(--irb-coffee);
  --bs-link-color-rgb: var(--irb-coffee-rgb);
  --bs-link-hover-color: var(--irb-brick);
  --bs-link-hover-color-rgb: var(--irb-brick-rgb);
  --bs-border-color: var(--irb-sand);
  --bs-border-color-translucent: var(--irb-coffee-15);
  --bs-border-radius: var(--irb-radius);
  --bs-border-radius-sm: var(--irb-radius-sm);
  --bs-border-radius-lg: var(--irb-radius);
  --bs-focus-ring-color: var(--irb-brick-15);
  --bs-form-valid-color: var(--irb-slate);
  --bs-form-valid-border-color: var(--irb-slate);
  --bs-form-invalid-color: var(--irb-brick);
  --bs-form-invalid-border-color: var(--irb-brick);
  --bs-font-sans-serif: var(--irb-font-body);
  --bs-body-font-family: var(--irb-font-body);
  --bs-highlight-bg: var(--irb-sand);
  --bs-highlight-color: var(--irb-coffee);
}

/* ---- Dark theme --------------------------------------------------------
   theme-init.js sets data-theme="dark" on <html> (system setting, or the
   visitor's choice from the header toggle). The palette names keep their
   ROLE, not their hue: --irb-ivory is still "the page", --irb-coffee is
   still "the text", so site.css needs no theme-specific rules. */
[data-theme="dark"] {
  color-scheme: dark;
  --irb-ivory: #1b1411;
  --irb-ivory-rgb: 27, 20, 17;
  --irb-coffee: #ece3d3;
  --irb-coffee-rgb: 236, 227, 211;
  --irb-sand: #46342a;
  --irb-sand-rgb: 70, 52, 42;
  --irb-brick: #e07a6b;
  --irb-brick-rgb: 224, 122, 107;
  --irb-slate: #9db4be;
  --irb-slate-rgb: 157, 180, 190;
  --irb-white: #241b17;
}

/* Bands that are dark in the light theme stay dark (one step above the
   page) in the dark theme, with the original light text and brick. */
[data-theme="dark"] :is(.irb-dark, .irb-section--dark, .irb-on-photo, .irb-announce, .irb-photo-card, .irb-call-card, .irb-skip-link, .irb-table thead th, .irb-overlay-header .irb-header:not(.is-scrolled):not(.is-open)) {
  --irb-ivory: #efe9dd;
  --irb-ivory-rgb: 239, 233, 221;
  --irb-coffee: #2c211c;
  --irb-coffee-rgb: 44, 33, 28;
  --irb-brick: #a94134;
  --irb-brick-rgb: 169, 65, 52;
}

/* Transparent tints (only tints of the palette are allowed). Declared on
   every scope that re-maps the palette, so they follow the theme. */
:root,
[data-theme="dark"] :is(.irb-dark, .irb-section--dark, .irb-on-photo, .irb-announce, .irb-photo-card, .irb-call-card, .irb-skip-link, .irb-table thead th, .irb-overlay-header .irb-header:not(.is-scrolled):not(.is-open)) {
  --irb-coffee-08: rgba(var(--irb-coffee-rgb), 0.08);
  --irb-coffee-15: rgba(var(--irb-coffee-rgb), 0.15);
  --irb-coffee-25: rgba(var(--irb-coffee-rgb), 0.25);
  --irb-coffee-55: rgba(var(--irb-coffee-rgb), 0.55);
  --irb-coffee-80: rgba(var(--irb-coffee-rgb), 0.8);
  --irb-ivory-25: rgba(var(--irb-ivory-rgb), 0.25);
  --irb-ivory-85: rgba(var(--irb-ivory-rgb), 0.85);
  --irb-sand-50: rgba(var(--irb-sand-rgb), 0.5);
  --irb-brick-15: rgba(var(--irb-brick-rgb), 0.15);
  --irb-amber-40: rgba(var(--irb-amber-rgb), 0.4);
}

/* Dark context: any element with .irb-dark swaps the semantic roles. */
.irb-dark {
  --irb-bg: var(--irb-coffee);
  --irb-surface: var(--irb-coffee);
  --irb-text: var(--irb-ivory);
  --irb-text-muted: var(--irb-ivory);
  --irb-rule: var(--irb-ivory-25);
  --irb-rule-strong: var(--irb-ivory-25);
  --irb-focus: var(--irb-amber);
  --bs-body-color: var(--irb-ivory);
  --bs-heading-color: var(--irb-ivory);
  --bs-link-color: var(--irb-ivory);
  --bs-link-color-rgb: var(--irb-ivory-rgb);
  --bs-link-hover-color: var(--irb-amber);
  --bs-link-hover-color-rgb: var(--irb-amber-rgb);
  --bs-border-color: var(--irb-ivory-25);
}

@media (min-width: 768px) {
  :root {
    --irb-gutter: 2rem;
    --irb-header-h: 88px;
  }
}