/* ==========================================================================
   ViiBee Café — Design Tokens
   Derived from Viibbe logo vector 1.pdf
   Pair with DESIGN_GUIDELINES.md
   ========================================================================== */

:root {
  /* --- Core brand (measured from logo) ------------------------------------ */
  --ink:        #100F0D;  /* warm near-black, primary dark surface            */
  --ink-rich:   #231F20;  /* rich black, type inside yellow blocks            */
  --paper:      #FFFFFF;
  --bee:        #F5F017;  /* the accent. NEVER as text on light surfaces      */

  /* --- Yellow shades (foreground-safe on light) --------------------------- */
  --bee-600:    #C7C315;  /* 1.87:1 on white — decorative only               */
  --bee-700:    #A5A114;  /* 2.72:1 on white — decorative only               */
  --bee-800:    #828012;  /* 4.16:1 on white — large text only               */
  --bee-ink:    #605E10;  /* 6.76:1 on white — SAFE for body text and links  */

  /* --- Yellow tints (backgrounds for ink text) ---------------------------- */
  --bee-50:     #FEFEE8;
  --bee-100:    #FCFBC5;
  --bee-200:    #FAF88B;
  --bee-300:    #F8F451;

  /* --- Warm neutrals (matched to --ink, do not substitute cool greys) ----- */
  --n-900:      #1E1D1C;
  --n-800:      #2D2C2A;
  --n-700:      #454442;
  --n-500:      #6B6A69;  /* 5.40:1 on white — secondary text                */
  --n-400:      #939392;
  --n-300:      #BCBCBB;
  --n-200:      #DEDDDD;
  --n-100:      #F1F1F0;
  --n-50:       #F8F8F8;

  /* --- Semantic (PROPOSED — pending brand approval) ----------------------- */
  --success:    #1E7A4C;
  --error:      #C32F2F;
  /* Info deliberately omitted: use --ink with a --bee highlight block.       */

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Poppins", "Baloo 2", system-ui, sans-serif;
  --font-body:    "Inter", "Figtree", system-ui, -apple-system, sans-serif;

  --t-display:  clamp(2.75rem, 6vw, 4.5rem);
  --t-h1:       clamp(2.25rem, 4vw, 3rem);
  --t-h2:       1.953rem;
  --t-h3:       1.563rem;
  --t-h4:       1.25rem;
  --t-body-lg:  1.125rem;
  --t-body:     1rem;
  --t-sm:       0.875rem;
  --t-eyebrow:  0.75rem;

  --lh-tight:   1.05;
  --lh-heading: 1.2;
  --lh-body:    1.65;

  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.12em;

  /* --- Spacing (8px base) -------------------------------------------------- */
  --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; --s-11: 160px;

  /* --- Radius (no values between 1 and 7px) ------------------------------- */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* --- Elevation (warm-tinted; light surfaces only) ----------------------- */
  --shadow-sm: 0 1px 2px rgba(16,15,13,.06), 0 1px 3px rgba(16,15,13,.08);
  --shadow-md: 0 4px 12px rgba(16,15,13,.08), 0 2px 4px rgba(16,15,13,.06);
  --shadow-lg: 0 12px 32px rgba(16,15,13,.12), 0 4px 8px rgba(16,15,13,.06);

  /* --- Motion -------------------------------------------------------------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);  /* dot motif only */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* --- Layout -------------------------------------------------------------- */
  --container: 1200px;
  --gutter: 24px;
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; }
}

/* ==========================================================================
   Signature component: the highlight block (the "Café" treatment)
   Max two per viewport. Light surfaces only.
   ========================================================================== */

.highlight {
  background: var(--bee);
  color: var(--ink-rich);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* On dark surfaces, emphasis is yellow TEXT, not a block. */
.on-ink .highlight,
.highlight--ondark {
  background: none;
  color: var(--bee);
  padding: 0;
}

/* ==========================================================================
   Dot motif — the "ii" dots
   ========================================================================== */

.dots { display: inline-flex; gap: 0.235em; align-items: center; }
.dots i {
  width: 1em; height: 1em;
  border-radius: 50%;
  background: var(--bee);
  display: block;
}

.dots--loading i { animation: dot-bounce 600ms var(--ease-bounce) infinite alternate; }
.dots--loading i:nth-child(2) { animation-delay: 150ms; }

@keyframes dot-bounce { from { transform: translateY(0); } to { transform: translateY(-35%); } }

/* ==========================================================================
   Focus — never carried by yellow alone on light surfaces
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--bee);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);   /* anchors the ring on light surfaces */
}

.on-ink :focus-visible {
  outline: 2px solid var(--bee);
  outline-offset: 2px;
  box-shadow: none;                    /* 15.84:1 on ink — ring is enough    */
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}