/* fonts */
/* ============================================================
   Coffee Island — Webfonts
   CoffeeIsland-Regular : display / headlines (ALWAYS uppercase, weight 400, never bold)
   CFDromon (cf_dromon family) : body, labels, UI text — full weight range
   ============================================================ */

/* ---- Display face ---- */
@font-face {
  font-family: 'CoffeeIsland';
  src: url('../fonts/CoffeeIsland-Regular.woff2?v=20261031-18') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- CFDromon — Thin (100) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_th-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_thit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 100; font-style: italic; font-display: swap;
}

/* ---- CFDromon — Extra Light (200) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_xl-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_xlit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 200; font-style: italic; font-display: swap;
}

/* ---- CFDromon — Light (300) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_lg-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_lgit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}

/* ---- CFDromon — Regular (400) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_rg-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_rgit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---- CFDromon — Medium (500) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_md-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_mdit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}

/* ---- CFDromon — Bold (700) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_bd-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_bdit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---- CFDromon — Extra Bold (800) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_xb-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_xbit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 800; font-style: italic; font-display: swap;
}

/* ---- CFDromon — Black (900) ---- */
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_bk-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CFDromon';
  src: url('../fonts/cf_dromon_bkit-webfont.woff2?v=20261031-18') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* colors */
/* ============================================================
   Coffee Island — Color tokens
   Base palette from brand master prompt + semantic aliases.
   ============================================================ */
:root {
  /* ---- Base brand palette ---- */
  --ci-brown:        #3B1F0E;   /* deep espresso — primary dark */
  --ci-brown-700:    #2A160A;   /* darker espresso */
  --ci-brown-300:    #6E4A30;   /* lighter roast — borders/muted on cream */
  --ci-cream:        #FCDCC4;   /* warm cream — default theme-color / surface */
  --ci-cream-200:    #FFEEE0;   /* lighter cream — raised surface on cream */
  --ci-cream-600:    #E9C3A4;   /* deeper cream — hairlines on cream */
  --ci-orange:       #F4784A;   /* vibrant accent — primary CTA (campaigns) */
  --ci-orange-600:   #E0612F;   /* orange hover/press */
  --ci-orange-200:   #FBC7B0;   /* orange tint — soft fills */
  --ci-amber:        #F5A01E;   /* marigold — the My Coffee Island app primary accent */
  --ci-amber-600:    #DC8A0C;   /* amber hover/press */
  --ci-amber-200:    #FCDFA6;   /* amber tint */
  --ci-green:        #2E5E3E;   /* coffee plant — secondary accent */
  --ci-green-600:    #234B30;   /* green hover/press */
  --ci-green-200:    #BFD6C5;   /* green tint */
  --ci-white:        #FFFFFF;
  --ci-black:        #0E1319;   /* near-black — dark theme bg / ink */
  --ci-black-800:    #1B222B;   /* raised surface on black */

  /* ---- Neutral ramp (warm-leaning grays) ---- */
  --ci-ink:          #0E1319;   /* primary text on light */
  --ci-ink-70:       rgba(14,19,25,0.70);
  --ci-ink-50:       rgba(14,19,25,0.50);
  --ci-ink-30:       rgba(14,19,25,0.30);
  --ci-paper-70:     rgba(255,255,255,0.70);
  --ci-paper-50:     rgba(255,255,255,0.50);
  --ci-paper-30:     rgba(255,255,255,0.30);

  /* ---- Semantic / status ---- */
  --ci-success:      #2E5E3E;
  --ci-warning:      #F4A340;
  --ci-error:        #D23B2E;
  --ci-info:         #1B3A5C;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  /* Surfaces — production body is WHITE; cream is a warm section accent */
  --surface-page:    var(--ci-white);     /* default page bg (matches brand.css body) */
  --surface-cream:   var(--ci-cream);     /* warm cream section / theme-color */
  --surface-card:    var(--ci-white);     /* card */
  --surface-raised:  var(--ci-cream-200);
  --surface-dark:    var(--ci-black);     /* dark sections / footer */
  --surface-dark-raised: var(--ci-black-800);
  --surface-brand:   var(--ci-brown);     /* espresso panels */

  /* Text */
  --text-strong:     var(--ci-brown);     /* headlines on light */
  --text-body:       var(--ci-ink);
  --text-muted:      var(--ci-ink-70);
  --text-faint:      var(--ci-ink-50);
  --text-on-dark:    var(--ci-cream);
  --text-on-dark-muted: var(--ci-paper-70);
  --text-on-accent:  var(--ci-white);

  /* Accents */
  --accent:          var(--ci-orange);
  --accent-hover:    var(--ci-orange-600);
  --accent-soft:     var(--ci-orange-200);
  --accent-2:        var(--ci-green);
  --accent-2-hover:  var(--ci-green-600);

  /* Lines */
  --border-on-light: var(--ci-cream-600);
  --border-strong:   var(--ci-brown-300);
  --border-on-dark:  rgba(255,255,255,0.16);
}

/* ============================================================
   DARK THEME — the My Coffee Island app's dark mode.
   Apply with <html data-theme="dark"> or any [data-theme="dark"] scope.
   The app's accent in both modes is the amber/marigold.
   ============================================================ */
[data-theme="dark"] {
  --surface-page:    var(--ci-black);
  --surface-card:    #1B222B;       /* raised card on black */
  --surface-raised:  #252E39;
  --surface-cream:   #1B222B;
  --surface-brand:   var(--ci-black);

  --text-strong:     var(--ci-white);
  --text-body:       var(--ci-cream);
  --text-muted:      rgba(255,255,255,0.72);
  --text-faint:      rgba(255,255,255,0.45);

  --accent:          var(--ci-amber);
  --accent-hover:    var(--ci-amber-600);
  --accent-soft:     rgba(245,160,30,0.18);

  --border-on-light: rgba(255,255,255,0.16);
  --border-strong:   rgba(255,255,255,0.28);
}

/* App surfaces use the amber accent regardless of light/dark. */
[data-product="app"] {
  --accent:          var(--ci-amber);
  --accent-hover:    var(--ci-amber-600);
  --accent-soft:     var(--ci-amber-200);
}

/* typography */
/* ============================================================
   Coffee Island — Typography tokens
   Display = CoffeeIsland (uppercase, 400 only). Body = CFDromon.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'CoffeeIsland', 'Arial Narrow', sans-serif;
  --font-body:    'CFDromon', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Weights (CFDromon only — display is always 400) ---- */
  --fw-thin:    100; /* @kind font */
  --fw-xlight:  200; /* @kind font */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-xbold:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* ---- Display type scale (CoffeeIsland) ----
     Always uppercase, letter-spacing ~0.02–0.06em, line-height tight. */
  --display-1: clamp(3rem, 9vw, 6rem);       /* @kind font */
  --display-2: clamp(2.25rem, 6vw, 4rem);    /* @kind font */
  --display-3: clamp(1.75rem, 4vw, 2.75rem); /* @kind font */
  --display-ls: 0.03em;                      /* display letter-spacing @kind font */
  --display-lh: 0.95;                        /* @kind font */

  /* ---- Body / UI type scale (CFDromon) ---- */
  --text-xs:   0.75rem;   /* 12px @kind font */
  --text-sm:   0.875rem;  /* 14px @kind font */
  --text-base: 1rem;      /* 16px body @kind font */
  --text-lg:   1.125rem;  /* 18px lead @kind font */
  --text-xl:   1.375rem;  /* 22px subhead @kind font */
  --text-2xl:  1.75rem;   /* 28px card title @kind font */

  --body-lh:   1.55;      /* @kind font */
  --tight-lh:  1.25;      /* @kind font */

  /* ---- Label preset (buttons, eyebrows) ---- */
  --label-ls:  0.06em;    /* @kind font */
}

/* spacing */
/* ============================================================
   Coffee Island — Spacing, radius, shadow, motion tokens
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 100px;   /* buttons, tags — the brand default */
  --radius-card: 20px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --shadow-sm: 0 1px 2px rgba(59,31,14,0.08);
  --shadow-md: 0 6px 18px rgba(59,31,14,0.12);
  --shadow-lg: 0 16px 40px rgba(59,31,14,0.18);
  --shadow-cta: 0 6px 20px rgba(244,120,74,0.35);  /* orange glow under CTAs */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */
  --dur-fast:    0.18s; /* @kind other */
  --dur-base:    0.28s; /* @kind other */
  --dur-slow:    0.5s;  /* @kind other */

  /* ---- Section padding (from production brand.css) ---- */
  --section-pad-y: clamp(3rem, 8vw, 6rem); /* @kind spacing */
  --section-pad-x: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* ---- Layout ---- */
  --container:   1200px;      /* @kind other */
  --container-narrow: 820px;  /* @kind other */
  --bp-tablet:   768px;       /* @kind other */
  --bp-desktop:  1280px;      /* @kind other */
}

/* base */
/* ============================================================
   Coffee Island — Base element defaults
   Sets the warm cream page, body type, display headings, links.
   ============================================================ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--body-lh);
  color: var(--ci-black);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — CoffeeIsland, uppercase, never bold.
   Color inherits (defaults to ink on white) so headings adapt per section. */
h1, h2, h3, .ci-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--display-ls);
  line-height: var(--display-lh);
  color: inherit;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--display-1); }
h2 { font-size: var(--display-2); }
h3 { font-size: var(--display-3); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

strong, b { font-weight: var(--fw-bold); }

img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: #fff; }

/* Eyebrow / kicker label */
.ci-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  font-size: var(--text-sm);
  color: var(--accent);
}

/* utilities */
/* ============================================================
   Coffee Island — Utility classes (mirrors production brand.css)
   Plain-CSS helpers for landing pages: headings, text, buttons,
   curved dividers, scroll-reveal, container.
   ============================================================ */

/* ---- Heading helper + responsive scale ---- */
.ci-heading {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}
.ci-heading--xl { font-size: clamp(3rem,   12vw, 8rem); }
.ci-heading--lg { font-size: clamp(2.25rem, 8vw, 5rem); }
.ci-heading--md { font-size: clamp(1.75rem, 5vw, 3rem); }
.ci-heading--sm { font-size: clamp(1.25rem, 3vw, 2rem); }

/* ---- Body text helpers ---- */
.ci-body--lg   { font-family: var(--font-body); font-size: 1.15rem;  font-weight: 300; line-height: 1.6; }
.ci-body--base { font-family: var(--font-body); font-size: 1rem;     font-weight: 400; line-height: 1.55; }
.ci-body--sm   { font-family: var(--font-body); font-size: 0.875rem; font-weight: 300; }
.ci-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Buttons (plain-CSS twin of the <Button> component) ---- */
.ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  padding: 0.9rem 2.25rem;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.ci-btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.ci-btn:active { transform: translateY(0); }
.ci-btn--primary   { background: var(--ci-orange); color: var(--ci-white); }
.ci-btn--primary:hover { box-shadow: var(--shadow-cta); }
.ci-btn--secondary { background: transparent; border: 2px solid currentColor; }
.ci-btn--dark      { background: var(--ci-black);  color: var(--ci-white); }
.ci-btn--cream     { background: var(--ci-cream);  color: var(--ci-black); }
.ci-btn--green     { background: var(--ci-green);  color: var(--ci-white); }

/* ---- Curved section dividers (never flat borders) ---- */
.ci-wave { display: block; line-height: 0; margin-bottom: -1px; }
.ci-wave svg { width: 100%; display: block; }

/* ---- Scroll-reveal (toggle .is-visible via IntersectionObserver) ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.35s; }
.reveal--delay-4 { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Container ---- */
.ci-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}
.ci-section { padding-block: var(--section-pad-y); }