/* ============================================================
   Skloo Design System — Colors & Type
   "Bubblegum" palette: cream + orchid + giraffe tan
   Source: alcidessillva/skloo @ src/constants/colors.js + theme.js
   ============================================================ */

:root {
  /* ── Cremes (base / surface) ───────────────────── */
  --cream-50:  #FFFBF5;
  --cream-100: #FDF6EC;
  --cream-200: #F5EBDC;
  --cream-300: #E8D9C0;

  /* ── Orchid (accent / "the bubble") ────────────── */
  --rose-100: #F5E8FF;
  --rose-300: #D4A8F5;
  --rose-500: #A855F7;
  --rose-700: #7E22CE;

  /* ── Giraffe (mascot) ──────────────────────────── */
  --giraffe-light: #F2D9B9;
  --giraffe-tan:   #D4A574;
  --giraffe-dark:  #8B5E3C;

  /* ── Surface / ink ─────────────────────────────── */
  --bg:       #FFFBF5;
  --surface:  #FFFFFF;
  --ink-900:  #2A1F1A;
  --ink-700:  #5A4A3F;
  --ink-500:  #8B7A6E;
  --ink-300:  #BDB0A4;
  --line:     rgba(139, 94, 60, 0.08);

  /* ── Status ────────────────────────────────────── */
  --green-100: #E8F7EF;
  --green-600: #2D9D6A;
  --amber-100: #FEF3DD;
  --amber-500: #F4B860;
  --red-100:   #FEEBEB;
  --red-500:   #C44040;

  /* ── Semantic foreground / background ──────────── */
  --fg-1: var(--ink-900);          /* Primary text       */
  --fg-2: var(--ink-700);          /* Secondary text     */
  --fg-3: var(--ink-500);          /* Tertiary / labels  */
  --fg-4: var(--ink-300);          /* Disabled / hint    */
  --fg-accent: var(--rose-700);    /* Accent text        */
  --fg-on-accent: #FFFFFF;         /* Text on rose-500   */

  --bg-1: var(--bg);               /* Page background    */
  --bg-2: var(--cream-100);        /* Subtle fill        */
  --bg-3: var(--cream-200);        /* Divider / track    */
  --bg-accent-soft: var(--rose-100);
  --bg-accent: var(--rose-500);

  --border-soft: var(--line);
  --border-strong: rgba(42, 31, 26, 0.12);
  --border-focus: var(--rose-500);

  /* ── Radii ─────────────────────────────────────── */
  --radius-sm: 14px;   /* small cards, inputs, chips */
  --radius-md: 24px;   /* cards, sheets               */
  --radius-lg: 32px;   /* hero cards, modals          */
  --radius-xl: 999px;  /* pills, buttons              */

  /* ── Spacing scale (px) ────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ── Shadows (warm brown + rose glow) ──────────── */
  --shadow-sm:   0 2px 8px rgba(139, 94, 60, 0.06);
  --shadow-md:   0 8px 24px rgba(139, 94, 60, 0.10);
  --shadow-lg:   0 16px 48px rgba(139, 94, 60, 0.14);
  --shadow-rose: 0 8px 24px rgba(168, 85, 247, 0.25);

  /* ── Gradients (component slot ─ use as background) ─ */
  --grad-page:      linear-gradient(180deg, #FFFBF5 0%, #F5E8FF 100%);
  --grad-hero:      linear-gradient(180deg, #F5E8FF 0%, #FFFBF5 100%);
  --grad-hero-card: linear-gradient(135deg, #F5E8FF 0%, #FDF6EC 100%);
  --grad-celebrate: linear-gradient(135deg, #D4A8F5 0%, #F4B860 100%);

  /* ── Type ──────────────────────────────────────── */
  /* Skloo's RN app uses system fonts (-apple-system / SF Pro on iOS,
     Roboto on Android). For web, we use the same SF Pro Text stack
     and fall back to Inter as the closest Google Fonts substitute.
     ⚠ Substitution flag: no custom font file ships in the repo.   */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Display: tight letter-spacing, used for splash logo + page titles */
  --fs-display: 52px;   --lh-display: 1.05;  --ls-display: -1.5px;
  --fs-h1: 28px;        --lh-h1: 1.2;        --ls-h1: -0.5px;
  --fs-h2: 22px;        --lh-h2: 1.25;       --ls-h2: -0.5px;
  --fs-h3: 18px;        --lh-h3: 1.3;        --ls-h3: -0.3px;
  --fs-title: 16px;     --lh-title: 1.4;     --ls-title: -0.2px;
  --fs-body: 14px;      --lh-body: 1.5;      --ls-body: 0;
  --fs-small: 13px;     --lh-small: 1.45;    --ls-small: 0;
  --fs-caption: 12px;   --lh-caption: 1.5;   --ls-caption: 0;
  --fs-eyebrow: 11px;   --lh-eyebrow: 1.4;   --ls-eyebrow: 0.6px; /* ALL CAPS */
  --fs-tiny: 10px;      --lh-tiny: 1.4;      --ls-tiny: 0.5px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;
}

/* ============================================================
   Element defaults (semantic)
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-black);
  color: var(--fg-1);
}

.title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-semi);
  color: var(--fg-1);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}

.small  { font-size: var(--fs-small);   line-height: var(--lh-small);   color: var(--fg-2); }
.caption{ font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.tiny   { font-size: var(--fs-tiny);    line-height: var(--lh-tiny);    color: var(--fg-3); letter-spacing: var(--ls-tiny); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-bold);
  color: var(--fg-3);
  text-transform: uppercase;
}

.eyebrow-accent {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-bold);
  color: var(--rose-700);
  text-transform: uppercase;
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Skloo wordmark — used in marketing + splash */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: -1.5px;
  color: var(--fg-1);
}
.wordmark-dot { color: var(--rose-500); }