@import "tailwindcss";

/* Brand system — soft pastel SaaS. See ~/.claude/skills/brand-system. */

@font-face {
  font-family: 'Outfit';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/outfit/files/outfit-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/outfit/files/outfit-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@theme {
  --color-brand-canvas:  #F4F4F4;
  --color-brand-surface: #FFFFFF;
  --color-brand-accent:  #C1B8FF;
  --color-brand-yellow:  #FED97B;
  --color-brand-ink:     #0D0C15;
  --color-brand-muted:   #5C5B68;
  --color-brand-border:  #E5E5EA;

  --font-outfit: 'Outfit', system-ui, -apple-system, sans-serif;

  --radius-card:  22px;
  --radius-inner: 16px;
  --radius-pill:  999px;
}

/* Base resets — keep in sync with assets/tokens.css from the skill. */
@layer base {
  body {
    font-family: var(--font-outfit);
    font-weight: 400;
    background-color: var(--color-brand-canvas);
    color: var(--color-brand-muted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--color-brand-ink);
    line-height: 1.2;
  }

  h1 { font-size: 36px; letter-spacing: -0.5px; }
  h2 { font-size: 28px; letter-spacing: -0.3px; }
  h3 { font-size: 20px; letter-spacing: -0.2px; }
}