/* MicrowaveOS "Mimic" — flattened design-token stylesheet.
   Generated for the design-sync bundle from tokens/*.css. The @import for
   Google-hosted webfonts must remain the first rule. */


/* ===== tokens/fonts.css ===== */
/* Webfonts — Google-hosted (flag: swap for licensed .ttf if self-hosting) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=Doto:wght@600;900&display=swap');

/* ===== tokens/colors.css ===== */
:root{
  /* ---- Palette (Northern Mockingbird) ---- */
  --mo-charcoal:#2D3236;      /* Charcoal Feather — primary text, dark surfaces */
  --mo-gray:#6D777C;          /* Mockingbird Gray — secondary text, icons */
  --mo-slate:#8F999D;         /* Slate Mid-tone — tertiary/muted */
  --mo-dune:#B1A89F;          /* Leg & Beak Dune — subtle detail, 2nd avatar */
  --mo-cream-top:#F6EFE1;     /* screen gradient top */
  --mo-cream:#EFE6D5;         /* Pale Cream — page base */
  --mo-cream-deep:#EBE1CF;    /* gradient bottom */
  --mo-white:#FFFFFF;         /* Frost White — cards */

  /* ---- Accents (warm "song") ---- */
  --mo-terra:#C9772C;         /* primary accent — CTAs, active, send, "OS" */
  --mo-terra-press:#A85F1F;   /* pressed/hover-dark */
  --mo-amber:#D98A3D;         /* secondary accent — avatars, LCD, waveform */

  /* ---- Protected health lane (green) ---- */
  --mo-lane:#5A9E7A;
  --mo-lane-deep:#4A7D61;
  --mo-lane-tint:rgba(90,158,122,.12);

  /* ---- Semantic aliases ---- */
  --text-primary:var(--mo-charcoal);
  --text-secondary:var(--mo-gray);
  --text-muted:var(--mo-slate);
  --text-on-dark:var(--mo-cream-top);
  --accent:var(--mo-terra);
  --accent-press:var(--mo-terra-press);
  --accent-soft:var(--mo-amber);
  --surface-card:var(--mo-white);
  --surface-dark:var(--mo-charcoal);
  --surface-page:linear-gradient(180deg,#F6EFE1 0%, #EFE6D5 46%, #EBE1CF 100%);
  --border-soft:rgba(45,50,54,.1);
  --border-hair:rgba(45,50,54,.06);
}

/* ===== tokens/typography.css ===== */
:root{
  --font-display:'Bricolage Grotesque', system-ui, sans-serif; /* headlines, wordmark */
  --font-ui:'Hanken Grotesk', system-ui, sans-serif;            /* body, labels, UI */
  --font-lcd:'Doto', ui-monospace, monospace;                   /* microwave LCD readouts */

  /* Display scale (Bricolage, weight 800, tracking -0.03em) */
  --type-hero:clamp(2.5rem,5vw,4.4rem);
  --type-h1:2.4rem;
  --type-h2:clamp(1.8rem,3.4vw,2.7rem);
  --type-title:1.7rem;
  --type-lede:1.14rem;

  /* UI scale (Hanken) */
  --type-body:1rem;
  --type-sm:0.875rem;
  --type-xs:0.75rem;
  --type-eyebrow:0.8rem;   /* LCD, uppercase, tracking .18em */

  --tracking-display:-0.03em;
  --tracking-eyebrow:0.18em;
  --leading-tight:1.04;
  --leading-body:1.6;
}

/* ===== tokens/spacing.css ===== */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:28px; --sp-7:40px; --sp-8:56px;
  --gutter:5vw;            /* page horizontal padding */
  --maxw:1120px;          /* content column */
  --maxw-hero:1280px;
}

/* ===== tokens/radius.css ===== */
:root{
  --radius-tile:13px;     /* icon tiles */
  --radius-card:16px;     /* cards, buttons */
  --radius-lg:20px;       /* feature grid, oven */
  --radius-pill:999px;    /* chips, capsule buttons */
  --radius-sheet:38px;    /* device screen */
}

/* ===== tokens/shadows.css ===== */
:root{
  --shadow-card:0 2px 6px rgba(45,50,54,.06);
  --shadow-card-lg:0 2px 10px rgba(45,50,54,.05);
  --shadow-accent:0 4px 12px rgba(201,119,44,.35);   /* terracotta CTA lift */
  --shadow-oven:0 28px 54px -22px rgba(45,50,54,.5);
  --shadow-float:0 26px 60px rgba(45,50,54,.28);      /* device mock */
}

/* ===== tokens/motion.css ===== */
/* Motion — the brand's gentle looping animations (see readme.md "Motion").
   Keyframes are canonical, copied from the app prototype (ui_kits/app/index.html).
   Components reference these by name via inline `animation:` styles. */
@keyframes mo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mo-hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}45%{transform:translateY(0)}}
@keyframes mo-ring{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@keyframes mo-note{0%{opacity:0;transform:translate(0,0) scale(.7)}15%{opacity:1}100%{opacity:0;transform:translate(14px,-40px) scale(1.15)}}
@keyframes mo-wave{0%,100%{height:5px}50%{height:14px}}
@media (prefers-reduced-motion:reduce){[style*="mo-"]{animation:none!important}}