/* ==========================================================================
   The Island Restro & Bar: design tokens (v3, "Quiet Grid")
   This is the ONLY file that defines colour values. site.css and Bootstrap
   both read these tokens. Names describe a ROLE (paper is always the page,
   ink always the text), so the dark theme only redefines values here.
   ========================================================================== */

/* Fonts are self-hosted (latin subsets). Alegreya: a humanist serif with
   a calligraphic hand, for headings (variable, 500-600). Alegreya Sans: its
   matching sans, for everything else. A printed-menu feel, not a template. */
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Fallback faces sized close to the web fonts, so text barely reflows when
   they arrive. Ratios are approximate, against Georgia and Arial. */
@font-face {
  font-family: "Alegreya Fallback";
  src: local("Georgia");
  size-adjust: 94%;
  ascent-override: 100%;
  descent-override: 32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Alegreya Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 92%;
  ascent-override: 98%;
  descent-override: 32%;
  line-gap-override: 0%;
}

:root {
  /* ---- Palette ----------------------------------------------------------
     A warm-neutral paper, soft charcoal ink, hairline greys and one accent:
     the dining room's paper parasols, softened. */
  --irb-paper: #f7f5f1;        /* page */
  --irb-surface: #efebe5;      /* quiet bands, fields */
  --irb-raised: #fbfaf8;       /* cards, form */
  --irb-ink: #2b2826;          /* text, headings */
  --irb-ink-soft: #5f5953;     /* secondary text (5.9:1 on paper) */
  --irb-line: #dcd6ce;         /* hairlines */
  --irb-line-strong: #b9b1a7;  /* field borders, active hairlines */
  --irb-accent: #a94134;       /* v1 brick: actions, prices, marks */
  --irb-accent-soft: #f1dfda;  /* selection, focus ring */
  --irb-on-accent: #ffffff;    /* text on the accent */

  /* Bold colours: v1's brick, slate, amber and coffee, used for whole
     bands and a few marks only. Light text on brick, slate and coffee. */
  --irb-brick: #a94134;        /* Happy Hour band */
  --irb-slate: #4e646e;        /* reservations band, selected filters */
  --irb-amber: #d99240;        /* button on slate, small marks */
  --irb-coffee: #4c312b;       /* announcement bar */
  --irb-on-bold: #fbf8f3;      /* text on brick, slate, coffee (5.9:1, 6.1:1, 12:1) */
  --irb-on-amber: #2b2826;     /* text on amber, both themes */
  --irb-overlay-strong: rgba(40, 26, 22, 0.82);  /* photo headers: coffee tint, */
  --irb-overlay-soft: rgba(40, 26, 22, 0.45);    /* darker behind the text */
  --irb-on-bold-soft: rgba(251, 248, 243, 0.82);
  --irb-on-bold-line: rgba(251, 248, 243, 0.32);
  --irb-floater-on-bold: rgba(251, 248, 243, 0.2);  /* drawings on photos and bold bands */

  --irb-floater: rgba(43, 40, 38, 0.1);   /* background line drawings */
  --irb-floater-accent: rgba(169, 65, 52, 0.24);
  --irb-floater-amber: rgba(217, 146, 64, 0.4);
  --irb-dot: rgba(43, 40, 38, 0.07);       /* the background dot grid */
  --irb-shade: rgba(43, 40, 38, 0.6);      /* lightbox backdrop */
  color-scheme: light;

  /* ---- Typography ------------------------------------------------------ */
  --irb-font-serif: "Alegreya", "Alegreya Fallback", Georgia, serif;
  --irb-font-sans: "Alegreya Sans", "Alegreya Sans Fallback", "Segoe UI", Arial, sans-serif;
  --irb-fs-xs: 0.875rem;
  --irb-fs-sm: 1rem;
  --irb-fs-base: 1.125rem;
  --irb-fs-md: 1.25rem;
  --irb-fs-lg: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  --irb-fs-xl: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem);
  --irb-fs-2xl: clamp(2rem, 1.5rem + 2vw, 3.1rem);
  --irb-fs-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem);
  --irb-tracking-label: 0.08em;

  /* ---- Space, shape, motion -------------------------------------------
     An 8px rhythm on a 12-column grid. Corners stay square; only pills
     (filters, chips) are round. */
  --irb-space-1: 0.25rem;
  --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-7: 6rem;
  --irb-space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --irb-gutter: 1rem;
  --irb-content-max: 1200px;
  --irb-radius: 2px;
  --irb-radius-pill: 999px;
  --irb-hairline: 1px solid var(--irb-line);
  --irb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --irb-duration: 240ms;
  --irb-header-h: 72px;

  /* ---- Bootstrap bridge: no default Bootstrap colours anywhere -------- */
  --bs-body-bg: var(--irb-paper);
  --bs-body-color: var(--irb-ink);
  --bs-emphasis-color: var(--irb-ink);
  --bs-secondary-color: var(--irb-ink-soft);
  --bs-secondary-bg: var(--irb-surface);
  --bs-tertiary-bg: var(--irb-surface);
  --bs-heading-color: var(--irb-ink);
  --bs-link-color: var(--irb-ink);
  --bs-link-hover-color: var(--irb-accent);
  --bs-border-color: var(--irb-line);
  --bs-border-color-translucent: var(--irb-line);
  --bs-border-radius: var(--irb-radius);
  --bs-border-radius-sm: var(--irb-radius);
  --bs-border-radius-lg: var(--irb-radius);
  --bs-focus-ring-color: var(--irb-accent-soft);
  --bs-form-invalid-color: var(--irb-accent);
  --bs-form-invalid-border-color: var(--irb-accent);
  --bs-font-sans-serif: var(--irb-font-sans);
  --bs-body-font-family: var(--irb-font-sans);
  --bs-highlight-bg: var(--irb-accent-soft);
  --bs-highlight-color: var(--irb-ink);
}

/* ---- Dark theme ---------------------------------------------------------
   theme-init.js sets data-theme="dark" on <html> when the visitor picks it
   with the header toggle. Same roles, night values. */
[data-theme="dark"] {
  color-scheme: dark;
  --irb-paper: #171615;
  --irb-surface: #201e1c;
  --irb-raised: #1c1a19;
  --irb-ink: #ece7e0;
  --irb-ink-soft: #aaa299;
  --irb-line: #35312d;
  --irb-line-strong: #5a544d;
  --irb-accent: #e07a6b;
  --irb-accent-soft: #33221f;
  --irb-on-accent: #171615;
  --irb-brick: #a94134;
  --irb-slate: #4e646e;
  --irb-amber: #d99240;
  --irb-coffee: #3a2621;
  --irb-floater: rgba(236, 231, 224, 0.1);
  --irb-floater-accent: rgba(224, 122, 107, 0.22);
  --irb-floater-amber: rgba(217, 146, 64, 0.3);
  --irb-dot: rgba(236, 231, 224, 0.06);
  --irb-shade: rgba(0, 0, 0, 0.7);
}

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