/* ==========================================================================
   TOKENS: the one file you edit to rebrand a site.
   Load order: tokens.css, then base.css. base.css only uses the names below,
   never a raw colour or size, so nothing else needs to change.

   Arabica Coffee House Cyprus: the colours and font of the old site
   (Muli, light headings, grey text, Arabica red, dark footer).
   ========================================================================== */


/* 1. Fonts =================================================================
   Mulish (the current name of Muli, the old site's font; SIL Open Font
   License), self-hosted: one variable .woff2 with every weight 200-1000,
   Latin only. Mulish has no Greek, so the Greek text (the competition page,
   one home slide) uses Inter's Greek file under the SAME family name: the
   browser picks per character. unicode-range makes a page download the
   Greek file only when it has Greek text.

   CHANGING THE FONT: see the template's tokens.css and CLAUDE.md, "Fonts". */

@font-face {
  font-family: "Mulish";
  src: url("/fonts/mulish-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mulish";
  src: url("/fonts/inter-greek.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}


/* 2. Fallback with Mulish's line metrics ===================================
   While Mulish loads, text renders in Arial with Mulish's ascent and
   descent, so lines keep their height when the real font arrives. The
   values are approximate; Capsize or Fontaine compute exact ones. Browsers
   without these descriptors use plain Arial, which is fine. */

@font-face {
  font-family: "Mulish Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 100.5%;
  descent-override: 25%;
  line-gap-override: 0%;
}


:root {

  /* 3. Colour ==============================================================
     The old site's palette. Contrast on white, measured: ink 5.7:1,
     ink-strong 12.6:1, ink-soft 4.5:1, accent 7.7:1, proof 5:1. The
     footer's text is 5.6:1 on its dark background. */

  --color-bg: #ffffff;           /* page background */
  --color-surface-alt: #f2f2f2;  /* the light grey box, hover fills */
  --color-ink: #666666;          /* text and headings (the old grey) */
  --color-ink-strong: #333333;   /* bold text, menu hover */
  --color-ink-soft: #767676;     /* secondary text */
  --color-line: #e6e6e6;         /* hairlines */
  --color-line-strong: #cccccc;  /* menu button border */

  --color-accent: #a31b0d;       /* links, current page, the red box */
  --color-accent-hover: #7a1409; /* same hue, darker */
  --color-accent-soft: #f8e8e6;  /* text selection */
  --color-on-accent: #ffffff;    /* text on the red box */
  --color-proof: #d72714;        /* "The proof is in the cup!" */

  --color-footer-bg: #222222;    /* footer background */
  --color-footer-ink: #999999;   /* footer text and links */
  --color-footer-line: #3a3a3a;  /* footer separators */

  /* The four store boxes on the contact page: the old hues, darkened
     where white text needed it (all 5:1 or better with white). */
  --color-box-grey: #5f7173;
  --color-box-purple: #874f9a;
  --color-box-orange: #b85010;
  --color-box-pink: #c0336f;

  --color-overlay: rgba(0, 0, 0, 0.6);    /* text over photos */
  --color-backdrop: rgba(0, 0, 0, 0.88);  /* behind the photo viewer */

  /* Keep in step with <meta name="theme-color"> in every page. */


  /* 4. Type ================================================================ */

  --font-sans: "Mulish", "Mulish Fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The contact page's italic line (Playfair Display italic on the old site). */
  --font-serif: Georgia, "Times New Roman", serif;

  /* Fixed sizes: what browsers without clamp() get (iOS 12, early 13).
     Fluid versions are in the @supports block at the end of this file. */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: 2.25rem;
  --step-5: 3rem;

  --weight-light: 300;           /* headings, as on the old site */
  --weight-bold: 700;


  /* 5. Space & layout ====================================================== */

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-section: 3rem;        /* top/bottom padding of a .section */

  --container: 61rem;           /* the old site's content width (976px) */
  --measure: 75ch;              /* longest comfortable line of text */
  --gutter: 1.25rem;            /* side padding on phones */
  --header-h: 4.5rem;           /* header bar height */
  --logo-h: 3.5rem;             /* logo height in the header */

  --radius-s: 4px;
  --radius: 4px;
  --radius-l: 8px;

  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.1);
}

@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
    --space-section: 4rem;
  }
}

@media (min-width: 64em) {
  :root {
    --header-h: 6.5rem;
    --logo-h: 4.9375rem;        /* 79px: the old header's logo */
  }
}


/* 6. Fluid type ===========================================================
   Only inside @supports. Writing a fixed fallback line first does NOT
   work through var(): a browser without clamp() would accept the variable
   and then drop the whole declaration, resetting headings to body size. */

@supports (font-size: clamp(1rem, 1vw, 2rem)) {
  :root {
    --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --step-2: clamp(1.3125rem, 1.17rem + 0.7vw, 1.75rem);
    --step-3: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);
    --step-4: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --step-5: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
    --space-section: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);
  }
}