/* ============================================================
   Bluebird Bakery — Colors & Type
   Foundation tokens for the brand. Import this file into any
   prototype, slide, or production page.
   ============================================================ */

/* ---------- Web fonts ----------
   Heads up: we don't have the bakery's exact wordmark fonts on
   disk. The logo's script and "BAKERY" lockup are display-only.
   For the system, we use these Google Fonts substitutions:
     • Pinyon Script   — script accent (logo-feel)
     • Cormorant SC    — small-caps display lockup
     • Cormorant Garamond — serif display + italic tagline
     • Nunito Sans     — body, UI, captions
   Flag: replace with brand-licensed faces when available.
*/
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+SC:wght@400;500;600&family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ============================================================
     COLOR — Brand palette
     Pulled from the logo: navy ink, the bird's dusty blue,
     pale-blue floral, cream/blush floral, sage leaves, paper.
     ============================================================ */

  /* Core blues */
  --color-ink:        #1F3A5F;  /* "Bluebird" wordmark navy */
  --color-ink-deep:   #142A47;  /* hover/pressed deep navy */
  --color-bluebird:   #6E8FB3;  /* the bird's body — primary brand blue */
  --color-bluebird-soft: #8AA8C7; /* lighter wing/feather blue */
  --color-sky:        #B8C9DC;  /* pale-blue flower, dividers */
  --color-mist:       #DCE4ED;  /* tints, hover backgrounds */

  /* Warm neutrals — paper, blush, cream */
  --color-paper:      #FBF8F4;  /* default page background */
  --color-cream:      #F4EBDF;  /* card / panel surface */
  --color-blush:      #EFE0D2;  /* cream-flower petals */
  --color-blush-deep: #D9B89A;  /* warm accent, baked-good crumb */

  /* Botanical */
  --color-sage:       #A6B097;  /* leaf green */
  --color-sage-deep:  #7E8B72;  /* darker leaf, secondary text on cream */
  --color-stem:       #8FA08A;  /* stem/branch */

  /* Functional neutrals */
  --color-charcoal:   #2A2723;  /* body copy on paper */
  --color-graphite:   #4A4640;  /* secondary copy */
  --color-stone:      #8B847C;  /* tertiary copy, captions */
  --color-line:       #E6DFD4;  /* hairlines on warm bg */
  --color-line-cool:  #D6DDE6;  /* hairlines on cool bg */

  /* Semantic */
  --color-success:    #7E8B72;  /* sage — confirmations */
  --color-warning:    #C68B5C;  /* warm honey */
  --color-danger:     #B5564A;  /* baked brick red, used sparingly */

  /* ----- Semantic aliases ----- */
  --bg:               var(--color-paper);
  --bg-elevated:      #FFFFFF;
  --bg-surface:       var(--color-cream);
  --bg-tint:          var(--color-mist);

  --fg-1:             var(--color-charcoal);   /* primary text */
  --fg-2:             var(--color-graphite);   /* secondary */
  --fg-3:             var(--color-stone);      /* tertiary, captions */
  --fg-ink:           var(--color-ink);        /* navy headings */
  --fg-on-dark:       var(--color-paper);

  --line:             var(--color-line);
  --line-strong:      var(--color-blush-deep);

  --accent:           var(--color-bluebird);
  --accent-soft:      var(--color-sky);

  /* ============================================================
     TYPE — Family stacks
     ============================================================ */
  --font-script:  'Pinyon Script', 'Allura', 'Great Vibes', cursive;
  --font-display: 'Cormorant Garamond', 'Cormorant', 'Garamond', 'Times New Roman', serif;
  --font-display-sc: 'Cormorant SC', 'Cormorant Garamond', serif;       /* small caps lockups */
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============================================================
     TYPE SCALE — major-third-ish, gentle for editorial feel
     ============================================================ */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   84px;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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;

  /* ============================================================
     RADIUS — soft, never harsh; pill for tags & buttons
     ============================================================ */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* ============================================================
     ELEVATION — soft, low, warm-cast shadows.
     Bakery brand never uses harsh black shadows.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(31, 58, 95, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 58, 95, 0.08);
  --shadow-md: 0 8px 20px rgba(31, 58, 95, 0.10), 0 2px 4px rgba(31, 58, 95, 0.05);
  --shadow-lg: 0 18px 40px rgba(31, 58, 95, 0.12), 0 4px 10px rgba(31, 58, 95, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* gentle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 520ms;
}

/* ============================================================
   ELEMENT-LEVEL DEFAULTS — opt in via .bbb-typography wrapper
   so this file never globally clobbers a host page.
   ============================================================ */
.bbb-typography,
.bbb-typography * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bbb-typography {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg);
  font-weight: 400;
}

/* Display script — used for the wordmark feel & rare moments. */
.bbb-script,
.bbb-typography .script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--fg-ink);
  letter-spacing: 0;
}

/* Serif display — section openers, hero lines, editorial titles. */
.bbb-typography h1,
.bbb-display-1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg-ink);
  margin: 0 0 var(--sp-5);
}

.bbb-typography h2,
.bbb-display-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--fg-ink);
  margin: 0 0 var(--sp-4);
}

.bbb-typography h3,
.bbb-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--fg-ink);
  margin: 0 0 var(--sp-4);
}

.bbb-typography h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--fg-ink);
  margin: 0 0 var(--sp-3);
}

/* Small-caps lockup — like "BAKERY" in the logo. */
.bbb-eyebrow {
  font-family: var(--font-display-sc);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-ink);
}

/* Italic tagline — "Baked for moments worth remembering". */
.bbb-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--fg-ink);
}

/* Body */
.bbb-typography p,
.bbb-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.bbb-body-lg { font-size: var(--fs-md); line-height: 1.6; }
.bbb-body-sm { font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); }

/* Caption / label */
.bbb-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.bbb-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

/* Links */
.bbb-typography a {
  color: var(--fg-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-sky);
  transition: color var(--dur-2) var(--ease-out), text-decoration-color var(--dur-2) var(--ease-out);
}
.bbb-typography a:hover {
  color: var(--color-bluebird);
  text-decoration-color: currentColor;
}

/* Code */
.bbb-typography code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-cream);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--color-ink-deep);
}

/* Selection — use bluebird soft for warmth */
.bbb-typography ::selection {
  background: var(--color-sky);
  color: var(--color-ink-deep);
}