/*
 * Madmum brand stylesheet.
 *
 * Derived from the official Madmum styleguide (jan 2020).
 *
 * Primary colours:
 *   - Madmum Blue  #00368c   (Pantone 661C)
 *   - Madmum Pink  #FFA39E   (Pantone 1765C)
 *   - White        #FFFFFF
 *
 * Secondary palette (taste-profile colours):
 *   - Floral purple  #C76ECF
 *   - Spicy green    #79C362
 *   - Fresh fruit    #FFCB31  (yellow)
 *   - Sweet fruit    #F08621  (orange)
 *   - Chocolate      #994F29  (brown)
 *   - Nuts           #C93A59  (red/pink)
 *
 * Typography:
 *   - Body & UI        : Averta (regular 400, medium 500, semibold 600, bold 700)
 *   - Accent / script  : Bourton Script (only for the wordmark "madmum")
 */


/* ---------------------------------------------------------------------------
   Fonts
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Averta';
  src: url('/static/madmum/fonts/AvertaStdPE-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Averta';
  src: url('/static/madmum/fonts/AvertaStdPE-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Averta';
  src: url('/static/madmum/fonts/AvertaStdPE-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Averta';
  src: url('/static/madmum/fonts/AvertaStdPE-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bourton Script - used only for the wordmark. If the local file isn't
   available yet, the @import below from Google Fonts (Sacramento) gives a
   visually similar fallback. */
@font-face {
  font-family: 'Bourton Script';
  src: url('/static/madmum/fonts/BourtonScript-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');


/* ---------------------------------------------------------------------------
   Brand tokens (CSS variables)
   --------------------------------------------------------------------------- */

:root {
  /* Primary */
  --mm-blue:        #00368c;
  --mm-blue-light:  #4a6cb5;
  --mm-blue-bg:     #e6ebf3;       /* very pale blue, for backgrounds */
  --mm-pink:        #ffa39e;
  --mm-pink-light:  #ffd5d2;
  --mm-pink-bg:     #fff4f3;
  --mm-white:       #ffffff;

  /* Secondary - taste profile colours */
  --mm-floral:      #c76ecf;
  --mm-spicy:       #79c362;
  --mm-fresh:       #ffcb31;
  --mm-sweet:       #f08621;
  --mm-choco:       #994f29;
  --mm-nuts:        #c93a59;

  /* Neutrals */
  --mm-ink:         #0c1330;       /* near-black with blue tint */
  --mm-ink-soft:    #4a536b;
  --mm-paper:       #fbfaf7;
  --mm-line:        rgba(0, 54, 140, 0.12);
  --mm-line-strong: rgba(0, 54, 140, 0.25);

  /* Status */
  --mm-success:     #2f9e44;
  --mm-warn:        #d97706;
  --mm-danger:      #dc2626;

  /* Typography */
  --mm-font-body:   'Averta', 'Helvetica Neue', 'Inter', system-ui, sans-serif;
  --mm-font-script: 'Bourton Script', 'Sacramento', cursive;
}


/* ---------------------------------------------------------------------------
   Global typography
   --------------------------------------------------------------------------- */

body, html {
  font-family: var(--mm-font-body);
}

/* The Madmum wordmark style - use for "Madmum" in headers etc. */
.mm-wordmark {
  font-family: var(--mm-font-script);
  font-weight: 700;
  letter-spacing: 0.01em;
}


/* ---------------------------------------------------------------------------
   Shared "panel" styling used by dashboard / pricing / planning / grid pages
   These mirror the previous brown tones, just remapped to brand blue.
   --------------------------------------------------------------------------- */

.mm-panel {
  background: rgba(0, 54, 140, 0.04);
  border: 1px solid var(--mm-line);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.mm-panel-strong {
  background: rgba(0, 54, 140, 0.06);
  border: 1px solid var(--mm-line);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.mm-card {
  background: rgba(0, 54, 140, 0.05);
  border: 1px solid var(--mm-line);
  border-radius: 0.75rem;
  transition: transform 0.08s, box-shadow 0.08s, border-color 0.08s;
}
.mm-card:hover {
  transform: translateY(-2px);
  border-color: var(--mm-line-strong);
  box-shadow: 0 4px 12px rgba(0, 54, 140, 0.12);
}

/* Tag/pill */
.mm-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 54, 140, 0.12);
  color: var(--mm-blue);
}
.mm-tag.pink   { background: var(--mm-pink-light); color: #8a3835; }
.mm-tag.low    { background: rgba(220, 38, 38, 0.15); color: var(--mm-danger); }
.mm-tag.warn   { background: rgba(217, 119, 6, 0.18); color: var(--mm-warn); }
.mm-tag.good   { background: rgba(47, 158, 68, 0.18); color: var(--mm-success); }

/* Roast-type pills using taste-profile colours */
.mm-tag.roast-espresso { background: rgba(153, 79, 41, 0.20); color: #6a3812; }
.mm-tag.roast-filter   { background: rgba(121, 195, 98, 0.22); color: #2f6b1f; }
.mm-tag.roast-deca     { background: rgba(199, 110, 207, 0.22); color: #7a3680; }


/* ---------------------------------------------------------------------------
   Unfold-specific tweaks — restyle the SITE_HEADER "madmum" with Bourton.
   Unfold renders the header inside the sidebar; we target it generically.
   --------------------------------------------------------------------------- */

/* The sidebar branding block */
aside[class*="sidebar"] h1,
aside[class*="sidebar"] .site-title,
nav h1.text-font-important,
.site-header h1 {
  font-family: var(--mm-font-script) !important;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* The subtitle "coffee roasters" stays in Averta */
aside[class*="sidebar"] p,
.site-subheader {
  font-family: var(--mm-font-body) !important;
}