@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Squirl — Tiimo-Inspired Design Tokens (Stage 1: Draft)
   Palette: Squirl Paper & Pollen | Layout: Tiimo Visual Planner
   ============================================================ */

:root {
  /* ── Background & Surfaces ── */
  --tiimo-bg:                  #FAF8F5;   /* Warm soft cream background */
  --tiimo-card:                #FFFFFF;   /* Pure white card surface */
  --tiimo-card-alt:            #F3EFE6;   /* Subtle tinted container */
  --tiimo-card-dark:           #1E1C16;   /* Deep charcoal container */
  --tiimo-card-accent:         #FFF8ED;   /* Warm golden tinted container */

  /* ── Typography Colors ── */
  --tiimo-text:                #1E1C16;   /* Primary dark charcoal text */
  --tiimo-text-muted:          #6A6354;   /* Secondary muted text */
  --tiimo-text-light:          #9A917C;   /* Light gray text */
  --tiimo-text-inverse:        #FFFFFF;   /* White text on dark/colored buttons */

  /* ── Borders & Outlines ── */
  --tiimo-border:              rgba(30, 28, 22, 0.08);
  --tiimo-border-subtle:       rgba(30, 28, 22, 0.04);
  --tiimo-border-dark:         rgba(255, 255, 255, 0.12);

  /* ── Squirl Brand Accents ── */
  --tiimo-gold:                #C58F38;   /* Primary Bronze Gold */
  --tiimo-gold-light:          #E0A33A;   /* Amber Pollen Gold */
  --tiimo-green:               #4A6E3A;   /* Meadow Green - Sprout */
  --tiimo-green-light:         #EBF3E8;   /* Soft Green tint */
  --tiimo-purple:              #7E5CA8;   /* Medication Purple - Capsule */
  --tiimo-purple-light:        #F4EEFA;   /* Soft Purple tint */
  --tiimo-amber:               #E0A33A;   /* Energy Bolt */
  --tiimo-teal:                #3B8B88;   /* Focus Aperture */

  /* ── Shadows (Tiimo Soft Elevation) ── */
  --tiimo-shadow-sm:           0 2px 8px rgba(30, 28, 22, 0.03);
  --tiimo-shadow-md:           0 12px 32px rgba(30, 28, 22, 0.05);
  --tiimo-shadow-lg:           0 24px 56px rgba(30, 28, 22, 0.08);
  --tiimo-shadow-button:       0 4px 16px rgba(197, 143, 56, 0.25);

  /* ── Radii (Generous Rounded Aesthetics) ── */
  --tiimo-radius-sm:           8px;
  --tiimo-radius-md:           16px;
  --tiimo-radius-lg:           24px;
  --tiimo-radius-xl:           36px;
  --tiimo-radius-full:         9999px;

  /* ── Typography Scale ── */
  --tiimo-font: "Plus Jakarta Sans", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --tiimo-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --tiimo-h1: clamp(2.8rem, 5.5vw, 4.8rem);
  --tiimo-h2: clamp(2rem, 3.8vw, 3.2rem);
  --tiimo-h3: clamp(1.4rem, 2.2vw, 1.85rem);
  --tiimo-body-lg: 1.15rem;
  --tiimo-body: 1rem;
  --tiimo-body-sm: 0.875rem;
}

/* Base resets */
html, body {
  background-color: var(--tiimo-bg);
  color: var(--tiimo-text);
  font-family: var(--tiimo-font);
  font-size: 16px;
  line-height: 1.6;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }