/* =========================================================================
   Moodful — Colors & Type
   The foundation layer. Import this first; everything else builds on it.
   Source: Moodful Design System handoff (claude.ai/design).
   See /design-system.md at the repo root for the full spec.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* -----------------------------------------------------------------------
     CORE PALETTE — paper, ink, surfaces
     ----------------------------------------------------------------------- */
  --midnight-ink: #1B2233;    /* primary text, deep UI */
  --bone:         #F6F1EA;    /* background; warmer than white */
  --linen:        #EDE5DA;    /* cards, raised surfaces */
  --ash:          #C9C0B5;    /* borders, dividers */

  /* -----------------------------------------------------------------------
     BRAND ACCENTS
     ----------------------------------------------------------------------- */
  --dusk-plum: #5B4B7A;       /* primary — CTAs, key actions */
  --ember:     #D97757;       /* secondary — streaks, celebratory */
  --sage:      #8AA298;       /* quiet — calm states, success */

  /* Tints + shades for hover/press (used sparingly) */
  --dusk-plum-hover: #4A3D65;
  --dusk-plum-press: #3D3354;
  --dusk-plum-tint:  #E3DDEC;   /* selected backgrounds */
  --ember-hover:     #C7664A;
  --ember-tint:      #F4E1D8;
  --sage-tint:       #DDE5E0;

  /* -----------------------------------------------------------------------
     MOOD SCALE — the heart of the product
     Cool-to-warm, low-to-high arousal. No good/bad.
     ----------------------------------------------------------------------- */
  --mood-1-heavy:   #4A6076;   /* Slate Rain */
  --mood-2-low:     #7B8595;   /* Driftwood  */
  --mood-3-neutral: #A8A498;   /* Stone      */
  --mood-4-bright:  #E2B070;   /* Honey      */
  --mood-5-vivid:   #E89556;   /* Marigold   */

  /* -----------------------------------------------------------------------
     SEMANTIC TEXT — derived from core
     ----------------------------------------------------------------------- */
  --fg-1: var(--midnight-ink);                /* primary text */
  --fg-2: #4A4F5E;                            /* secondary text */
  --fg-3: #7A7569;                            /* tertiary / meta */
  --fg-inverse: var(--bone);                  /* text on dark surfaces */
  --fg-on-accent: var(--bone);                /* text on dusk/ember */

  /* -----------------------------------------------------------------------
     SEMANTIC SURFACES
     ----------------------------------------------------------------------- */
  --bg-page:    var(--bone);
  --bg-surface: var(--linen);
  --bg-raised:  #FBF8F3;                      /* one notch above page */
  --bg-sunken:  #E5DDD0;                      /* below page */
  --bg-overlay: rgba(27, 34, 51, 0.40);

  --border-hairline: var(--ash);
  --border-soft:     #D9D1C5;

  /* -----------------------------------------------------------------------
     TYPE — families
     ----------------------------------------------------------------------- */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-numerals: var(--font-body);          /* always pair with tabular-nums */

  /* -----------------------------------------------------------------------
     TYPE — scale (rem)
     0.75 / 0.875 / 1 / 1.25 / 1.5 / 2 / 2.75 / 4
     ----------------------------------------------------------------------- */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.75rem;
  --fs-3xl:  4rem;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-display: 1.2;
  --lh-body:    1.5;

  /* Letter-spacing — display gets a hair of negative tracking */
  --tracking-display: -0.015em;
  --tracking-body:    0em;
  --tracking-eyebrow: 0.08em;

  /* -----------------------------------------------------------------------
     SPACING (4px base) — favor more than less
     ----------------------------------------------------------------------- */
  --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;

  /* -----------------------------------------------------------------------
     RADII — nothing sharp
     ----------------------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;    /* default */
  --r-lg:   20px;    /* cards */
  --r-xl:   28px;    /* hero surfaces */
  --r-full: 999px;   /* pills + avatars */

  /* -----------------------------------------------------------------------
     SHADOW — one soft shadow only
     ----------------------------------------------------------------------- */
  --shadow-soft: 0 4px 24px rgba(27, 34, 51, 0.06);
  /* For elements that need a hint of lift on Bone (no real elevation) */
  --shadow-whisper: 0 1px 2px rgba(27, 34, 51, 0.04);

  /* -----------------------------------------------------------------------
     MOTION — slow + organic
     ----------------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   280ms;
  --dur-slow:   420ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply by adding the class, or by setting on the element directly.
   ========================================================================= */

.moodful, body.moodful {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / headlines — serif, generous breath */
.h-display, .moodful h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.h1, .moodful h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.h2, .moodful h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}

.h3, .moodful h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0;
}

.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.35;
  color: var(--fg-1);
  margin: 0;
}

/* Body */
.p, .moodful p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.p-lg {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-1);
}

.p-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-2);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* Eyebrow / kicker — small caps style label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Numerals — anywhere data appears */
.num, .moodful [data-tabular] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Inline code */
.code, .moodful code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--fg-1);
}

/* Links — quiet underline, plum on hover */
.link, .moodful a {
  color: var(--fg-1);
  text-decoration-line: underline;
  text-decoration-color: var(--ash);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.link:hover, .moodful a:hover {
  color: var(--dusk-plum);
  text-decoration-color: var(--dusk-plum);
}

/* Selection — warm */
.moodful ::selection {
  background: var(--ember-tint);
  color: var(--fg-1);
}
</content>