/* ============================================================
   FU FUT COFFEE — Design System
   ============================================================ */

/* ---------- 1. Color Tokens ---------- */
:root {
  --c-primary:        #0F7B78;
  --c-primary-dark:   #0C5F5B;
  --c-secondary:      #18B4B7;
  --c-light:           #EDF8F8;
  --c-bg:              #FAFAF8;
  --c-white:          #FFFFFF;
  --c-accent:          #D6B36A;
  --c-success:        #2E7D32;
  --c-error:          #D32F2F;

  --c-ink:            #0E1A18;      /* main text */
  --c-ink-soft:       #4A5A57;      /* secondary text */
  --c-ink-faint:      #8A9994;      /* muted text */
  --c-line:            rgba(15,123,120,.12); /* hairlines */

  /* derived tokens */
  --c-hero-overlay:   linear-gradient(180deg, rgba(14,26,24,.15) 0%, rgba(14,26,24,.55) 100%);
  --c-gradient-soft:  linear-gradient(135deg, var(--c-light) 0%, var(--c-white) 100%);
  --c-gradient-warm:  linear-gradient(135deg, #FFF7E6 0%, var(--c-white) 100%);
  --c-gradient-teal:  linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);

  /* ---------- 2. Typography ---------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script:  "Great Vibes", cursive;

  /* type scale — modular (1.2 ratio) */
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-80: 5rem;
  --fs-100: 6.25rem;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --ls-tight:   -0.02em;
  --ls-wide:    0.08em;
  --ls-widest:  0.22em;

  /* ---------- 3. Spacing (8px system) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- 4. Radius ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;      /* per spec */
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- 5. Elevation ---------- */
  --e-1: 0 1px 2px rgba(14,26,24,.04), 0 2px 4px rgba(14,26,24,.04);
  --e-2: 0 4px 12px rgba(14,26,24,.06), 0 1px 3px rgba(14,26,24,.04);
  --e-3: 0 10px 30px rgba(14,26,24,.08), 0 4px 10px rgba(14,26,24,.05);
  --e-4: 0 24px 60px rgba(14,26,24,.12), 0 8px 20px rgba(14,26,24,.06);
  --e-teal: 0 20px 50px rgba(15,123,120,.28);
  --e-gold: 0 12px 32px rgba(214,179,106,.30);

  /* ---------- 6. Grid ---------- */
  --w-max:    1440px;
  --w-cont:   1280px;
  --w-narrow: 720px;
  --gutter:   var(--s-5);
  --grid-cols: 12;

  /* ---------- 7. Motion ---------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-soft:   cubic-bezier(.4,.0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 560ms;
  --dur-4: 900ms;

  --nav-h: 80px;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --c-bg:           #0C1513;
  --c-white:        #11201D;
  --c-light:        #142825;
  --c-ink:          #F2F7F6;
  --c-ink-soft:     #B9C9C5;
  --c-ink-faint:    #7C8C88;
  --c-line:         rgba(255,255,255,.10);
  --c-hero-overlay: linear-gradient(180deg, rgba(12,21,19,.15) 0%, rgba(12,21,19,.70) 100%);
  --c-gradient-soft: linear-gradient(135deg, #142825 0%, #0C1513 100%);
  --c-gradient-warm: linear-gradient(135deg, #1F2018 0%, #11201D 100%);
  --e-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20);
  --e-2: 0 4px 12px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.20);
  --e-3: 0 10px 30px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.30);
  --e-4: 0 24px 60px rgba(0,0,0,.65), 0 8px 20px rgba(0,0,0,.40);
}

/* ---------- 8. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.no-scroll { overflow: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "kern";
  font-variation-settings: "opsz" 32;
  transition: background var(--dur-3) var(--ease-soft), color var(--dur-3) var(--ease-soft);
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

/* ---------- 9. Typography classes ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5vw, var(--fs-80)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.8vw, var(--fs-60)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-36); line-height: var(--lh-snug); }
.h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-snug); }
.body-lg { font-size: var(--fs-20); line-height: var(--lh-base); color: var(--c-ink-soft); }
.body    { font-size: var(--fs-16); line-height: var(--lh-base); color: var(--c-ink-soft); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-base); color: var(--c-ink-soft); }
.caps    { text-transform: uppercase; letter-spacing: var(--ls-widest); font-size: var(--fs-12); font-weight: 600; }
.script  { font-family: var(--font-script); font-weight: 400; }

/* ---------- 10. Layout helpers ---------- */
.container { max-width: var(--w-cont); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 8vw, var(--s-10)); }
.section-sm { padding-block: var(--s-8); }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-transform: uppercase; letter-spacing: var(--ls-widest);
  font-size: var(--fs-12); font-weight: 600; color: var(--c-primary);
  padding: 6px 14px; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-white);
}
[data-theme="dark"] .eyebrow { color: var(--c-accent); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.section-title { margin-top: var(--s-4); margin-bottom: var(--s-3); }
.section-sub { max-width: 60ch; margin-inline: auto; color: var(--c-ink-soft); }
.center .section-sub { margin-inline: auto; }
.divider {
  height: 1px; background: var(--c-line); border: 0; margin-block: var(--s-7);
}

/* ---------- 11. Buttons ---------- */
.btn {
  --bg: var(--c-primary); --fg: #fff; --bd: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 28px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-14); letter-spacing: .02em;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-soft), background var(--dur-2);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--e-teal); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform var(--dur-4) var(--ease-out);
}
.btn:hover::after { transform: translateX(100%); }

.btn--primary { --bg: var(--c-primary); --fg: #fff; --bd: var(--c-primary); }
.btn--dark    { --bg: var(--c-primary-dark); --fg: #fff; --bd: var(--c-primary-dark); }
.btn--accent  { --bg: var(--c-accent); --fg: #1a130a; --bd: var(--c-accent); }
.btn--accent:hover { box-shadow: var(--e-gold); }
.btn--ghost   { --bg: transparent; --fg: var(--c-ink); --bd: var(--c-line); }
.btn--white   { --bg: #fff; --fg: var(--c-primary-dark); --bd: #fff; }
.btn--light   { --bg: rgba(255,255,255,.12); --fg: #fff; --bd: rgba(255,255,255,.32); backdrop-filter: blur(8px); }
.btn--light:hover { background: rgba(255,255,255,.2); }
.btn--lg { padding: 18px 36px; font-size: var(--fs-16); }
.btn--sm { padding: 10px 18px; font-size: var(--fs-12); }
.btn--block { display: flex; width: 100%; }

/* icon-only */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-line);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2);
}
.btn-icon:hover { transform: translateY(-2px); background: var(--c-light); }
.btn-icon svg { width: 20px; height: 20px; }

/* ---------- 12. Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--fs-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-soft); }
.input, .select, .textarea {
  padding: 14px 18px;
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-size: var(--fs-16);
  transition: border var(--dur-1), box-shadow var(--dur-1);
  width: 100%;
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(15,123,120,.12);
}
.textarea { min-height: 140px; resize: vertical; }
.field-error .input { border-color: var(--c-error); }
.field-error-msg { color: var(--c-error); font-size: var(--fs-12); }

/* ---------- 13. Cards ---------- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--e-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-soft), border-color var(--dur-2);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--e-3); }
.card-glass {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: var(--e-3);
}
[data-theme="dark"] .card-glass { background: rgba(17,32,29,.55); border-color: rgba(255,255,255,.08); }

/* ---------- 14. Badges & Tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 600;
}
.badge--primary { background: var(--c-light); color: var(--c-primary); }
.badge--gold { background: rgba(214,179,106,.15); color: #8a6a2a; }
.badge--success { background: rgba(46,125,50,.12); color: var(--c-success); }
.badge--verify { background: var(--c-primary); color: #fff; }

.tag { padding: 6px 14px; border: 1px solid var(--c-line); border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 500; color: var(--c-ink-soft); cursor: pointer; transition: all var(--dur-1); }
.tag:hover, .tag--active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- 15. Utilities ---------- */
.flex { display: flex; } .grid { display: grid; } .gap-2 { gap: var(--s-2); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.ai-center { align-items: center; } .jc-between { justify-content: space-between; } .jc-center { justify-content: center; }
.wrap { flex-wrap: wrap; }
.colspan-6 { grid-column: span 6; } .colspan-4 { grid-column: span 4; } .colspan-8 { grid-column: span 8; }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.text-soft { color: var(--c-ink-soft); } .text-faint { color: var(--c-ink-faint); } .text-accent { color: var(--c-accent); } .text-primary { color: var(--c-primary); }
.strike { text-decoration: line-through; color: var(--c-ink-faint); }
.hide { display: none !important; }
.rounded { border-radius: var(--r-lg); } .rounded-xl { border-radius: var(--r-xl); } .rounded-pill { border-radius: var(--r-pill); }

/* ---------- 16. Reveal-on-scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal].in-view { opacity: 1; transform: none; }

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}