/* =========================================================
   BU. Design System  —  colors_and_type.css
   Tokens for color, typography, spacing, radii, shadows.
   Pronounced "be you". Gen Z / Gen Alpha fashion identity app.
   ========================================================= */

/* --- Brand font: Vito Bold (display) -------------------------- */
@font-face {
  font-family: "Vito";
  src: url("fonts/Vito_Bold.otf") format("opentype"),
       url("styles/fonts/Vito_Bold.otf") format("opentype");
  font-weight: 400 900;   /* single file covers all weights for display */
  font-style: normal;
  font-display: swap;
}

/* --- Other fonts (Google Fonts substitutions — see README) -- */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Caveat:wght@400..700&family=DM+Mono:wght@400;500&family=Special+Elite&family=Syne:wght@400..800&family=Outfit:wght@400..900&display=swap");

:root {
  /* ----- Brand color: BU. Orange ----------------------------
     The logo is a chunky black-outlined cream B sitting on a
     warm orange checker. Orange is the hero. */
  --bu-orange-50:   #FFF1E4;
  --bu-orange-100:  #FFD9B5;
  --bu-orange-200:  #FFB778;
  --bu-orange-300:  #FF9A4B;
  --bu-orange-400:  #FF7A1A;   /* PRIMARY */
  --bu-orange-500:  #F26511;
  --bu-orange-600:  #C84F08;
  --bu-orange-700:  #8E3604;

  /* ----- Cream / paper (page background, scrapbook base) ---- */
  --bu-cream-50:    #FFFCF6;   /* page bg */
  --bu-cream-100:   #FAF3E5;   /* card bg */
  --bu-cream-200:   #F1E5CC;   /* tape, washi */
  --bu-cream-300:   #E6D2A8;

  /* ----- Ink (typography + outlines) ------------------------ */
  --bu-ink-900:     #15110D;   /* primary text */
  --bu-ink-800:     #2A2218;
  --bu-ink-600:     #5A4F40;
  --bu-ink-400:     #8C7E68;
  --bu-ink-300:     #B6A88E;
  --bu-ink-200:     #D8CFB9;

  /* ----- Pure -------------------------------------------------*/
  --bu-white:       #FFFFFF;
  --bu-paper:       #FFFAF1;   /* a slightly-warm white for cards */
  --bu-black:       #0B0905;

  /* ----- Aesthetic accents (the 8 style prompts) ------------ */
  --aes-streetwear:    #C8FF3F;   /* electric chartreuse */
  --aes-y2k:           #FF1F8F;   /* bubblegum pink */
  --aes-sporty:        #005FD8;   /* cobalt blue */
  --aes-clean:         #DDE8E4;   /* cool linen */
  --aes-gorpcore:      #4A5E28;   /* forest olive */
  --aes-alternative:   #3A0A6E;   /* deep violet */
  --aes-oldmoney:      #162240;   /* authority navy */
  --aes-coquette:      #F7AECA;   /* ballet blush */
  --aes-afrocentric:   #B83200;   /* brick terracotta */
  --aes-vintage:       #7A4522;   /* warm caramel */
  --aes-indie:         #C8A870;   /* rich oat */
  --aes-cozy:          #F5D060;   /* butter yellow */
  --aes-darkacademia:  #1E140A;   /* espresso */
  --aes-cottagecore:   #A8D870;   /* meadow green */

  /* ----- Semantic ------------------------------------------- */
  --bu-success:     #2F9E5E;   /* mossy green (not corporate) */
  --bu-warning:     #E8A53A;
  --bu-danger:      #D63D2F;
  --bu-info:        #3F7BD6;
  --bu-like:        #FF4DA6;   /* heart / save */

  /* ----- Foreground / background semantic tokens ------------ */
  --fg-1: var(--bu-ink-900);   /* primary text */
  --fg-2: var(--bu-ink-600);   /* secondary */
  --fg-3: var(--bu-ink-400);   /* tertiary / meta */
  --fg-on-orange: var(--bu-paper);
  --fg-on-dark: var(--bu-paper);

  --bg-page:   var(--bu-cream-50);
  --bg-card:   var(--bu-paper);
  --bg-raised: var(--bu-white);
  --bg-sunken: var(--bu-cream-100);
  --bg-tape:   var(--bu-cream-200);

  /* ----- Outlines ------------------------------------------- */
  --stroke-hairline: 1px solid var(--bu-ink-200);
  --stroke-card:     1.5px solid var(--bu-ink-900);
  --stroke-bold:     3px solid var(--bu-ink-900);
  --stroke-sticker:  4px solid var(--bu-ink-900);

  /* ----- Radii (soft, generous, scrapbook-y) ---------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --r-blob: 64% 36% 58% 42% / 48% 60% 40% 52%;  /* organic sticker */

  /* ----- Shadows (drop / sticker / debossed) ---------------- */
  --shadow-soft:    0 4px 12px -2px rgba(31, 22, 10, 0.10);
  --shadow-card:    0 8px 24px -6px rgba(31, 22, 10, 0.14);
  --shadow-float:   0 16px 40px -12px rgba(31, 22, 10, 0.22);
  --shadow-sticker: 3px 3px 0 0 var(--bu-ink-900);        /* hard offset, sticker */
  --shadow-sticker-lg: 6px 6px 0 0 var(--bu-ink-900);
  --shadow-press:   inset 0 2px 0 rgba(255,255,255,0.55), 0 1px 0 rgba(31,22,10,0.10);

  /* ----- Spacing (4px grid) --------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ----- Type scale ---------------------------------------- */
  --font-display: "Vito", "Lilita One", "Bowlby One", system-ui, sans-serif;
  --font-body:    "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --font-hand:    "Caveat", "Patrick Hand", cursive;
  --font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* fluid scale targeted at mobile-first product */
  --t-eyebrow:   600 11px/1.2 var(--font-body);
  --t-caption:   500 13px/1.4 var(--font-body);
  --t-body-sm:   400 14px/1.5 var(--font-body);
  --t-body:      400 16px/1.55 var(--font-body);
  --t-body-lg:   400 18px/1.55 var(--font-body);
  --t-label:     600 14px/1.3 var(--font-body);
  --t-button:    600 16px/1 var(--font-body);

  --t-h6:        700 16px/1.25 var(--font-body);
  --t-h5:        700 20px/1.25 var(--font-body);
  --t-h4:        700 24px/1.2 var(--font-body);
  --t-h3:        400 32px/1.05 var(--font-display);
  --t-h2:        400 46px/1.0 var(--font-display);
  --t-h1:        400 64px/0.95 var(--font-display);
  --t-display:   400 96px/0.92 var(--font-display);

  --t-hand-sm:   500 18px/1.2 var(--font-hand);
  --t-hand:      500 22px/1.15 var(--font-hand);
  --t-hand-lg:   700 32px/1.1 var(--font-hand);

  /* ----- Motion ------------------------------------------- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot */
  --ease-out-snappy: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;
}

/* ============================================================
   Semantic element styles — opt in by adding the matching class.
   ============================================================ */

.bu-display { font: var(--t-display); letter-spacing: -0.02em; color: var(--fg-1); }
.bu-h1 { font: var(--t-h1); letter-spacing: -0.015em; color: var(--fg-1); }
.bu-h2 { font: var(--t-h2); letter-spacing: -0.01em; color: var(--fg-1); }
.bu-h3 { font: var(--t-h3); color: var(--fg-1); }
.bu-h4 { font: var(--t-h4); color: var(--fg-1); }
.bu-h5 { font: var(--t-h5); color: var(--fg-1); }
.bu-h6 { font: var(--t-h6); color: var(--fg-1); }
.bu-body { font: var(--t-body); color: var(--fg-1); }
.bu-body-sm { font: var(--t-body-sm); color: var(--fg-2); }
.bu-caption { font: var(--t-caption); color: var(--fg-3); }
.bu-eyebrow { font: var(--t-eyebrow); color: var(--fg-2); letter-spacing: 0.12em; text-transform: uppercase; }
.bu-label { font: var(--t-label); color: var(--fg-1); }
.bu-hand { font: var(--t-hand); color: var(--fg-1); }
.bu-hand-sm { font: var(--t-hand-sm); color: var(--fg-2); }
.bu-hand-lg { font: var(--t-hand-lg); color: var(--fg-1); }
.bu-mono { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); }

/* small util */
.bu-tilt-l { transform: rotate(-2.2deg); }

/* ============================================================
   Skeleton shimmer — one shared sweep for every BU_SKELETON_LIGHT/
   BU_SKELETON_DARK shape (FitCardSkeletonGrid and the hand-built
   avatar/bar skeletons in Home, Discover, Search, VibeMatch, Profile).
   Pure CSS: a translucent gradient band, positioned via transform (not
   background-position), animated on the compositor — no JS timer/RAF,
   no state, so it can never affect fetch timing, readiness gating, or
   reveal logic, only what a still-loading skeleton looks like.
   Opt in per skeleton shape with class="bu-skeleton-shimmer" — the
   shape's own background/border/opacity/radius (BU_SKELETON_LIGHT/DARK)
   are untouched; this only adds an overlay sweep on top.
   ============================================================ */
@keyframes bu-skeleton-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
.bu-skeleton-shimmer { position: relative; overflow: hidden; }
.bu-skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: translateX(-120%);
  animation: bu-skeleton-sweep 0.9s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bu-skeleton-shimmer::after { content: none; animation: none; }
}
.bu-tilt-r { transform: rotate(2.2deg); }