/* =========================================================
   SharmClean Design System
   Colors, typography & semantic tokens
   ========================================================= */

/* ---- Fonts -------------------------------------------------
   Primary: Comfortaa — rounded geometric sans, confirmed as
   the official SharmClean brand face (per founder, 2026-04-20).
   Weights available on Google Fonts: 300/400/500/600/700.
   Note: Comfortaa has no weight above 700, so "ExtraBold" in the
   system maps to Comfortaa 700.
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

:root {
  /* ========= BRAND COLORS ========= */

  /* Teal — primary brand (wordmark, links, primary CTA). */
  --teal-700: #00666d;  /* deep teal, high-contrast text */
  --teal-600: #008e98;  /* primary teal, matches logo */
  --teal-500: #14a8b4;
  --teal-400: #34c3d9;  /* broom-cyan accent */
  --teal-200: #a5e2e8;
  --teal-100: #d6f1f4;
  --teal-050: #ecf9fa;

  /* Sand / Yellow — warm background family */
  --sand-900: #8a6a0f;
  --sand-800: #a48220;  /* olive heading color from card */
  --sand-700: #c79a17;
  --sand-600: #eab211;  /* pyramid yellow */
  --sand-500: #ffd96d;  /* mid gradient yellow */
  --sand-400: #ffde80;  /* card bg center */
  --sand-300: #ffe7a2;
  --sand-200: #fff0c2;
  --sand-100: #fff4d4;  /* lightest gradient start */
  --sand-050: #fffaea;

  /* Warm tan / sand texture */
  --tan-500: #c89a5f;
  --tan-400: #d8b07e;
  --tan-300: #efd09a;  /* sand texture bottom-right */
  --tan-200: #f5dfb8;

  /* Neutral (warm-biased grays so they sit nicely on sand) */
  --ink-900: #1f1a0c;
  --ink-800: #3a3223;
  --ink-700: #574b36;
  --ink-600: #7a6d55;
  --ink-500: #9b8e77;
  --ink-400: #bcb19a;
  --ink-300: #d9cfb8;
  --ink-200: #ece3ce;
  --ink-100: #f6efda;
  --ink-050: #fbf6e5;
  --white:   #ffffff;

  /* Semantic */
  --success: #3ba55d;
  --warning: #e8a321;
  --danger:  #c83c2f;
  --info:    var(--teal-500);

  /* ========= SEMANTIC COLOR ROLES ========= */
  --fg-1: var(--ink-900);        /* primary text */
  --fg-2: var(--sand-800);       /* headings on sand (olive) */
  --fg-3: var(--ink-700);        /* body on light bg */
  --fg-4: var(--ink-600);        /* muted / secondary */
  --fg-5: var(--ink-500);        /* placeholder, caption */
  --fg-brand: var(--teal-600);   /* links, brand text */
  --fg-on-brand: #ffffff;        /* text on teal */

  --bg-1: var(--sand-100);       /* default app canvas — warm cream */
  --bg-2: var(--sand-050);       /* cards / raised surfaces */
  --bg-3: var(--white);          /* input fields, pure white surfaces */
  --bg-4: var(--sand-200);       /* subtle zone */
  --bg-brand: var(--teal-600);   /* primary filled surface */
  --bg-brand-soft: var(--teal-050);
  --bg-accent: var(--sand-600);  /* yellow accent (badges, highlights) */

  --border-1: var(--ink-200);    /* hairline on light */
  --border-2: var(--ink-300);    /* stronger hairline */
  --border-brand: var(--teal-400);

  /* Signature sand gradient (business-card) */
  --bg-hero-gradient: radial-gradient(120% 100% at 10% 20%, #fff4d4 0%, #ffde80 55%, #efd09a 100%);
  --bg-hero-gradient-flat: linear-gradient(135deg, #fff4d4 0%, #ffde80 60%, #efd09a 100%);

  /* ========= TYPOGRAPHY ========= */
  --font-sans: 'Comfortaa', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Comfortaa', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights — Comfortaa ships 300–700.
     Headings use 700 (Bold); body 400; medium-emphasis 500/600. */
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-xbold: 700;
  --w-black: 700;

  /* Type scale (1.25 modular-ish, tuned for rounded sans) */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 72px;
  --fs-6xl: 96px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-loose: 1.6;

  --tr-tight: -0.02em;
  --tr-normal: 0;
  --tr-wide: 0.04em;

  /* ========= SPACING ========= */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ========= RADII ========= */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;      /* default for cards, buttons */
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;   /* capsules — very common in brand */

  /* ========= SHADOWS =========
     Warm-tinted shadows (shifted toward olive) so they feel at
     home on sand backgrounds rather than the default cold gray. */
  --sh-1: 0 1px 2px rgba(89, 68, 10, 0.10);
  --sh-2: 0 4px 10px rgba(89, 68, 10, 0.10), 0 1px 2px rgba(89, 68, 10, 0.06);
  --sh-3: 0 10px 24px rgba(89, 68, 10, 0.12), 0 2px 6px rgba(89, 68, 10, 0.08);
  --sh-4: 0 24px 48px rgba(89, 68, 10, 0.16), 0 6px 12px rgba(89, 68, 10, 0.08);
  --sh-focus: 0 0 0 4px rgba(52, 195, 217, 0.35); /* broom-cyan focus ring */

  /* ========= MOTION ========= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;
}

/* =========================================================
   Element-level defaults
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;             /* Comfortaa tops out at 700 */
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-2);           /* olive on sand is the brand move */
  text-transform: lowercase;    /* brand uses lowercase headlines */
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-2);
  text-transform: lowercase;
  margin: 0;
}
h3, .h3 {
  font-weight: var(--w-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-weight: var(--w-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font-weight: var(--w-semi);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  margin: 0;
}
.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  font-weight: var(--w-reg);
}
.caption {
  font-size: var(--fs-sm);
  color: var(--fg-4);
  line-height: var(--lh-normal);
}
.overline {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--fg-brand);
  font-weight: var(--w-bold);
}
.tagline {
  font-weight: var(--w-semi);
  color: var(--fg-brand);
  font-size: var(--fs-md);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
a:hover { opacity: 0.75; }
a:active { opacity: 0.55; }

/* Utility classes */
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-xbold);
  color: var(--fg-brand);
  letter-spacing: -0.01em;
}
.hero-bg { background: var(--bg-hero-gradient); }