/* ==========================================================================
   The Island Restro & Bar: design tokens (v2, "Spice-Tin Labels")
   This is the ONLY file that defines colour values. The palette is the
   original site's (ivory, coffee, sand, brick, slate, amber), unchanged;
   v2 changes the type, shapes and motion around it.
   ========================================================================== */

@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo-2-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo-2-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo-2-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("../fonts/kalam-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("../fonts/kalam-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mukta";
  src: url("../fonts/mukta-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mukta";
  src: url("../fonts/mukta-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mukta";
  src: url("../fonts/mukta-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mukta";
  src: url("../fonts/mukta-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Fallback faces scaled close to the web fonts' width and line metrics, so
   text barely reflows (and the page does not jump) when the fonts arrive. */
@font-face {
  font-family: "Baloo Fallback";
  src: local("Arial Rounded MT Bold"), local("Arial");
  size-adjust: 98%;
  ascent-override: 106%;
  descent-override: 50%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Kalam Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 96%;
  ascent-override: 118%;
  descent-override: 52%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Mukta Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 96%;
  ascent-override: 128%;
  descent-override: 60%;
  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 ------------------------------------------------------ */
  /* Baloo 2: rounded, chunky lettering (headings and bold UI text).
     Kalam: handwriting for notes and annotations.
     Mukta: plain, friendly reading text. All three self-hosted. */
  --irb-font-display: "Baloo 2", "Baloo Fallback", "Arial Rounded MT Bold", Arial, sans-serif;
  --irb-font-script: "Kalam", "Kalam Fallback", "Comic Sans MS", cursive;
  --irb-font-body: "Mukta", "Mukta 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.7rem, 1.5rem + 5vw, 5.75rem);
  --irb-fs-label: 0.8125rem;
  --irb-tracking-caps: 0.08em;
  --irb-tracking-display: 0;

  /* ---- 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: 4px;
  --irb-radius: 8px;
  --irb-radius-pill: 999px;
  --irb-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --irb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --irb-duration: 220ms;

  /* ---- Label world -----------------------------------------------------
     Every block is a printed label: an ink line (--irb-line) around a flat
     colour, with the colour plate printed slightly off register. */
  --irb-line-w: 2.5px;          /* the label's printed ink border */
  --irb-notch: 14px;            /* radius of the cut corner */
  --irb-misprint: 6px;          /* off-register offset of the colour plate */
  --irb-beat: 4.8s;             /* the one shared clock: steam, parasols, doodles */
  --irb-line: var(--irb-coffee);
  --irb-ground: var(--irb-ivory);   /* colour behind a label (fills its notches) */
  --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-stock-brick, .irb-stock-slate, .irb-label--brick, .irb-label--slate, .irb-label--amber, .irb-label--coffee, .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;
  --irb-slate: #4e646e;
  --irb-slate-rgb: 78, 100, 110;
}

/* 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-stock-brick, .irb-stock-slate, .irb-label--brick, .irb-label--slate, .irb-label--amber, .irb-label--coffee, .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;
  }
}