/* ============================================================
   Make it With Mary — Fonts
   The custom logo lettering is bespoke chrome/brush art. These
   are the nearest Google Fonts substitutes used across the system:
     • Archivo Black  → heavy industrial display (the "MAKE IT WITH" voice)
     • Kaushan Script → brush script accent (the red "Mary" flourish)
     • Barlow         → workmanlike body + UI text
     • Barlow Semi Condensed → compact labels, stats, chips
   Flag: swap in the true brand faces if/when licensed files arrive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Semi+Condensed:wght@500;600;700&family=Kaushan+Script&display=swap');
/* ============================================================
   Make it With Mary — Color tokens  (Logo-matched, feminine)

   Sampled straight from the logo: a royal-BLUE badge with a bright
   CYAN glow outline and a warm CORAL-RED "Mary" script. Blue + cyan
   carry the brand (like the badge); the coral-red is the signature
   feminine warm accent. Femininity also comes through a soft blush
   highlight and lightly rose-tinted neutrals — used sparingly, never
   letting pink/purple take over the palette.

   Logo swatches (sampled): blue #076FC2 · cyan #0ACCE7 · red #EE4049
   ============================================================ */

:root {
  /* ---- Logo brand core (primary definitions) ---- */
  --miwm-blue:        #0F72C6;  /* royal badge blue — core brand / primary */
  --miwm-blue-royal:  #0A599F;  /* deeper royal — ink/brand text            */
  --miwm-blue-sky:    #8DB8E8;  /* light sky highlight                      */

  --miwm-cyan:        #12CBE6;  /* signature turquoise glow — secondary     */
  --miwm-cyan-bright: #5CE0F2;
  --miwm-cyan-deep:   #0A9CB8;

  --miwm-navy:        #0B2C4E;  /* deep badge base — dark surfaces          */
  --miwm-navy-800:    #123A60;
  --miwm-navy-700:    #1A4B77;

  --miwm-red:         #EE4A5A;  /* coral-red "Mary" script — warm accent    */
  --miwm-red-deep:    #D22E44;

  --miwm-blush:       #FF9BB0;  /* soft feminine blush — highlights only    */
  --miwm-blush-soft:  #FFC4D2;

  --miwm-ink:         #0C1C2E;  /* deep blue-tinted near-black outline/ink  */
  --miwm-white:       #FFFFFF;

  /* ---- Feminine-name aliases (kept so nothing breaks; not dominant) ---- */
  --miwm-pink:        var(--miwm-blush);
  --miwm-pink-bright: var(--miwm-blush-soft);
  --miwm-pink-deep:   var(--miwm-red);
  --miwm-pink-soft:   var(--miwm-blush-soft);
  --miwm-magenta:     var(--miwm-red);
  --miwm-berry:       var(--miwm-blue-royal);
  --miwm-berry-deep:  var(--miwm-navy);
  --miwm-plum:        var(--miwm-navy);
  --miwm-plum-800:    var(--miwm-navy-800);
  --miwm-plum-700:    var(--miwm-navy-700);
  --miwm-raspberry:   var(--miwm-red);
  --miwm-raspberry-deep:var(--miwm-red-deep);
  --miwm-black:       var(--miwm-ink);

  /* ---- Soft rose-tinted neutrals (subtle warmth, kept light) ---- */
  --steel-50:  #F7F8FB;
  --steel-100: #EEF1F6;
  --steel-200: #DEE3EC;
  --steel-300: #C3CCDA;
  --steel-400: #97A4B8;
  --steel-500: #6E7C93;
  --steel-600: #52607A;
  --steel-700: #3B475D;
  --steel-800: #263043;
  --steel-900: #16202F;

  /* ---- Workshop warm (caution accents, used sparingly) ---- */
  --caution:    #FFC21A;  /* golden yellow — highlights, ratings           */
  --caution-deep:#E0A500;

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */

  /* Text */
  --text-strong:  var(--miwm-ink);
  --text-body:    var(--steel-800);
  --text-muted:   var(--steel-500);
  --text-invert:  var(--miwm-white);
  --text-brand:   var(--miwm-blue-royal);
  --text-accent:  var(--miwm-red);
  --text-link:    var(--miwm-blue-royal);
  --text-link-hover: var(--miwm-cyan-deep);

  /* Surfaces */
  --surface-page:   #FCFDFE;
  --surface-card:   var(--miwm-white);
  --surface-sunken: var(--steel-50);
  --surface-dark:   var(--miwm-navy);
  --surface-dark-2: var(--miwm-navy-800);
  --surface-invert: var(--miwm-ink);

  /* Borders */
  --border-hairline: var(--steel-200);
  --border-strong:   var(--steel-300);
  --border-ink:      var(--miwm-ink);   /* heavy comic outline           */

  /* Interactive */
  --accent-primary:      var(--miwm-blue);
  --accent-primary-hover:var(--miwm-cyan-deep);
  --accent-primary-press:var(--miwm-blue-royal);
  --accent-danger:       var(--miwm-red);
  --accent-danger-hover: var(--miwm-red-deep);
  --focus-ring:          var(--miwm-cyan);

  /* Feedback */
  --success: #159E5B;
  --warning: var(--caution-deep);
  --danger:  var(--miwm-red);
  --info:    var(--miwm-blue);

  /* Gradients */
  --grad-chrome: linear-gradient(180deg, var(--miwm-blue-sky) 0%, var(--miwm-cyan) 34%, var(--miwm-blue) 68%, var(--miwm-navy) 100%);
  --grad-badge:  radial-gradient(circle at 50% 34%, var(--miwm-cyan) 0%, var(--miwm-blue) 46%, var(--miwm-navy) 100%);
  --grad-glow:   linear-gradient(90deg, var(--miwm-cyan) 0%, var(--miwm-blue-sky) 100%);
}
/* ============================================================
   Make it With Mary — Typography tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-script:  'Kaushan Script', 'Segoe Script', cursive;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-condensed:'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */

  /* Fluid display + heading scale */
  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 6rem); /* @kind other */
  --fs-h1: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); /* @kind other */
  --fs-h2: clamp(1.5rem, 1rem + 2.2vw, 2.5rem); /* @kind other */
  --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* @kind other */
  --fs-h4: 1.25rem; /* @kind other */

  /* Body + UI */
  --fs-lead: 1.25rem; /* @kind other */
  --fs-body: 1rem; /* @kind other */
  --fs-sm:   0.875rem; /* @kind other */
  --fs-xs:   0.75rem; /* @kind other */
  --fs-label:0.8125rem; /* @kind other */

  /* Line heights */
  --lh-tight:   1.02; /* @kind other */
  --lh-heading: 1.12; /* @kind other */
  --lh-snug:    1.35; /* @kind other */
  --lh-body:    1.6; /* @kind other */

  /* Letter spacing */
  --ls-display: 0.01em; /* @kind other */
  --ls-caps:    0.08em; /* @kind other */
  --ls-caps-wide:0.14em; /* @kind other */
  --ls-body:    0; /* @kind other */
}
/* ============================================================
   Make it With Mary — Spacing & layout tokens
   4px base grid.
   ============================================================ */

:root {
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide:1360px;
  --gutter:        clamp(20px, 5vw, 64px); /* @kind spacing */
  --section-y:     clamp(56px, 8vw, 120px); /* @kind spacing */
}
/* ============================================================
   Make it With Mary — Effects: radii, borders, shadows, motion
   The brand leans on heavy black "comic" outlines and an
   electric-cyan glow rather than soft diffuse shadows.
   ============================================================ */

:root {
  /* Corner radii — chunky, confident */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Border widths */
  --bw-hair: 1px; /* @kind other */
  --bw:      2px; /* @kind other */
  --bw-ink:  3px;   /* @kind other */

  /* Shadows — cool navy-tinted, plus the glow */
  --shadow-sm:  0 1px 2px rgba(0, 17, 51, 0.12);
  --shadow-md:  0 6px 18px rgba(0, 17, 51, 0.14);
  --shadow-lg:  0 18px 40px rgba(0, 17, 51, 0.20);
  --shadow-pop: 4px 4px 0 var(--miwm-black);          /* hard offset "sticker" shadow */
  --shadow-pop-blue: 4px 4px 0 var(--miwm-blue-royal);

  /* Glow — the electric-cyan halo (from the logo badge outline) */
  --glow-cyan:  0 0 0 2px rgba(18,203,230,0.55), 0 0 22px rgba(18,203,230,0.45);
  --glow-cyan-soft: 0 0 18px rgba(18,203,230,0.35);
  --glow-red:   0 0 20px rgba(238,74,90,0.45);

  /* Focus */
  --ring: 0 0 0 3px rgba(18,203,230,0.6);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-pop:      cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur:       200ms; /* @kind other */
  --dur-slow:  360ms; /* @kind other */
}
/* ============================================================
   Make it With Mary — base element defaults & brand helpers
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;            /* Archivo Black is single-weight */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--dur) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: var(--fw-bold); color: var(--text-strong); }

small { font-size: var(--fs-sm); }

::selection { background: var(--miwm-cyan); color: var(--miwm-black); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

hr { border: none; border-top: var(--bw-hair) solid var(--border-hairline); margin: var(--sp-8) 0; }

/* -------- Brand text helpers -------- */

/* Uppercase industrial eyebrow */
.miwm-eyebrow {
  font-family: var(--font-condensed);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-wide);
  font-size: var(--fs-label);
  color: var(--text-brand);
}

/* Chrome-blue extruded headline (the "MAKE IT WITH" voice) */
.miwm-chrome {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--miwm-white);
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--miwm-black);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgba(0,17,51,0.35);
}

/* Red brush-script flourish (the "Mary" voice) */
.miwm-script {
  font-family: var(--font-script);
  color: var(--miwm-red);
  -webkit-text-stroke: 1.5px var(--miwm-black);
  paint-order: stroke fill;
  font-weight: 400;
  line-height: 0.9;
}

/* Cyan glow halo utility */
.miwm-glow { box-shadow: var(--glow-cyan-soft); }

/* Heavy comic outline */
.miwm-ink { border: var(--bw-ink) solid var(--border-ink); }