/* =========================================================
   Brooklyn Marie Music — Design Tokens
   colors_and_type.css
   ========================================================= */

/* ---------- Webfonts ---------- */
/* Bellaboo (TypeFairy) is the OFFICIAL logo / wordmark font. License must be
   purchased from Creative Fabrica / Font Bundles before it can be used.
   When the font file is acquired:
     1. drop the files into /public/fonts/ as
          Bellaboo-Regular.woff2  (and optionally .woff / .otf / .ttf)
     2. uncomment the @font-face block below.
   Until then we leave the @font-face commented out — the font stack on
   --font-logo falls through to Sacramento (Google Font), and the console
   stays clean (no 404s on /fonts/Bellaboo-Regular.*). */
/*
@font-face {
  font-family: 'Bellaboo';
  src: url('fonts/Bellaboo-Regular.woff2') format('woff2'),
       url('fonts/Bellaboo-Regular.woff')  format('woff'),
       url('fonts/Bellaboo-Regular.otf')   format('opentype'),
       url('fonts/Bellaboo-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&family=Sacramento&display=swap');

:root {
  /* ============ COLOR — RAW BRAND TOKENS ============ */

  /* Text */
  --bm-text-primary:    #1D1D1C;   /* near-black */
  --bm-text-secondary:  #282728;   /* charcoal */
  --bm-text-light:      #FCFBFA;   /* off-white */
  --bm-text-muted:      #9FA29D;   /* light gray */

  /* Accents — primary expression */
  --bm-teal:            #3EB7B2;   /* core identity */
  --bm-teal-soft:       #A8D4D8;   /* pastel teal */
  --bm-pink:            #FDA2C5;   /* energy / personality */
  --bm-pink-lavender:   #E3A4EF;   /* soft lavender-pink */

  /* Accents — supporting */
  --bm-blue:            #1E4FB3;   /* royal blue, sparingly */
  --bm-purple:          #625DC7;   /* soft purple, sparingly */

  /* Surfaces / off-whites derived from palette */
  --bm-surface:         #FCFBFA;   /* base canvas */
  --bm-surface-warm:    #F6F2EE;   /* warm paper */
  --bm-surface-cool:    #EFF5F4;   /* faint teal wash */
  --bm-surface-blush:   #FBEEF2;   /* faint pink wash */
  --bm-line:            #E8E5E0;   /* hairline */
  --bm-line-strong:     #D6D3CE;   /* stronger hairline */

  /* ============ COLOR — SEMANTIC ============ */
  --fg-1:               var(--bm-text-primary);
  --fg-2:               var(--bm-text-secondary);
  --fg-muted:           var(--bm-text-muted);
  --fg-on-dark:         var(--bm-text-light);

  --bg-1:               var(--bm-surface);
  --bg-2:               var(--bm-surface-warm);
  --bg-inverse:         var(--bm-text-primary);

  --accent:             var(--bm-teal);
  --accent-soft:        var(--bm-teal-soft);
  --accent-warm:        var(--bm-pink);
  --accent-warm-soft:   var(--bm-pink-lavender);
  --link:               var(--bm-blue);
  --link-hover:         var(--bm-purple);

  /* Signature brand gradient — teal → pink. Used as accent stripes and
     hover/highlight washes throughout the site. Originated as the order-
     success ribbon and promoted to a system token. */
  --bm-grad:            linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
  --bm-grad-diag:       linear-gradient(135deg, var(--accent) 0%, var(--accent-warm) 100%);

  --border:             var(--bm-line);
  --border-strong:      var(--bm-line-strong);

  /* ============ STATUS COLORS — informational chips, banners, hovers ============ */
  /* Used by admin status badges (Pending / Confirmed / Bounced), warning
     banners (Local prototype mode), destructive hovers (delete buttons),
     and soft-success indicators. Three triplets — fg / bg / border — so
     a chip can pick a single status name and get a coherent set. */
  --danger-fg:          #B13A4A;
  --danger-bg:          #FDE8EC;
  --danger-border:      #F5C6CD;
  --warn-fg:            #8B3A1F;
  --warn-bg:            #FCEAE0;
  --warn-border:        #F4C2CB;
  --success-fg:         #1E7A52;
  --success-bg:         #E6F4EE;
  --success-border:     #A8D4D8;

  /* ============ TYPE — FAMILIES ============ */
  /* Sacramento (Google Fonts) is the standard wordmark + script face. The
     Bellaboo paid font is parked: if it's ever licensed, reinstate the
     @font-face block in this file and prepend 'Bellaboo' here. */
  --font-logo:    'Sacramento', 'Brush Script MT', cursive;                   /* wordmark */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Sacramento', 'Brush Script MT', cursive;                   /* signoffs / pull-quotes */
  --font-mono:    ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* ============ TYPE — SIZE SCALE (modular, ~1.2 / 1.25 mix) ============ */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-80: 5rem;
  --fs-112: 7rem;

  /* ============ TYPE — WEIGHTS ============ */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ============ TYPE — LEADING ============ */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-loose: 1.65;

  /* ============ TYPE — TRACKING ============ */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-eyebrow: 0.18em;

  /* ============ SPACING (4pt grid) ============ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ============ RADII ============ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ============ SHADOWS — soft, paper-like, never harsh ============ */
  --shadow-1: 0 1px 2px rgba(29,29,28,0.04), 0 1px 1px rgba(29,29,28,0.03);
  --shadow-2: 0 4px 14px rgba(29,29,28,0.06), 0 2px 4px rgba(29,29,28,0.04);
  --shadow-3: 0 18px 40px rgba(29,29,28,0.10), 0 6px 12px rgba(29,29,28,0.05);
  --shadow-glow-teal: 0 12px 36px rgba(62,183,178,0.28);
  --shadow-glow-pink: 0 12px 36px rgba(253,162,197,0.32);

  /* ============ MOTION ============ */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — graceful */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use as classes (.bm-h1) or as a model for component CSS.
   ========================================================= */

.bm-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.bm-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(3rem, 8vw, var(--fs-112));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.bm-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.25rem, 5vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.bm-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.bm-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.bm-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  letter-spacing: 0.005em;
}

.bm-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.bm-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.bm-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.bm-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

.bm-script {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.bm-wordmark {
  font-family: var(--font-logo);
  font-weight: var(--fw-regular);
  font-size: clamp(3rem, 7vw, var(--fs-112));
  line-height: 1;
  color: var(--fg-1);
  letter-spacing: 0;
}

.bm-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bm-surface-cool);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

/* link defaults — soft, with restraint */
.bm-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) 30%, transparent);
  transition: color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
.bm-link:hover {
  color: var(--link-hover);
  border-bottom-color: color-mix(in srgb, var(--link-hover) 60%, transparent);
}