/* ============================================================
   Penci Design System — Colors & Type
   Pastel, soft, cute handwriting note app
   ============================================================ */

/* ---- Fonts (Google Fonts fallbacks — see fonts/ for local) ---- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&family=Caveat:wght@400;500;600;700&family=Kalam:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     COLORS — Primary (Sky Blue family from logo)
     ========================================================= */
  --penci-sky-50:  #F0F7FF;
  --penci-sky-100: #DCEBFB;
  --penci-sky-200: #B8D7F5;
  --penci-sky-300: #8FBEEC;
  --penci-sky-400: #6BA5E0;   /* primary - matches wordmark */
  --penci-sky-500: #4A8BD1;
  --penci-sky-600: #3670B5;
  --penci-sky-700: #2B5A94;
  --penci-sky-800: #1F4470;
  --penci-sky-900: #16314F;

  /* =========================================================
     COLORS — Pastel accents (a cute, friendly palette)
     Soft, low-saturation, "cloud candy"
     ========================================================= */
  /* Peach — highlights, warm actions */
  --penci-peach-100: #FFE8DC;
  --penci-peach-300: #FFC7A8;
  --penci-peach-500: #FFA57A;
  --penci-peach-700: #E07E4E;

  /* Mint — success, nature, fresh */
  --penci-mint-100: #DFF5EA;
  --penci-mint-300: #A8E4C8;
  --penci-mint-500: #78CFA6;
  --penci-mint-700: #4AA77F;

  /* Lavender — pens, creative, AI */
  --penci-lavender-100: #EBE4F7;
  --penci-lavender-300: #C9B8E8;
  --penci-lavender-500: #A58DD4;
  --penci-lavender-700: #7862AA;

  /* Butter — notification, star, highlight */
  --penci-butter-100: #FFF4D1;
  --penci-butter-300: #FFE388;
  --penci-butter-500: #FFD148;
  --penci-butter-700: #D9A923;

  /* Rose — love, destructive soft, favorites */
  --penci-rose-100: #FDE3E8;
  --penci-rose-300: #F8B5C3;
  --penci-rose-500: #ED8097;
  --penci-rose-700: #C85773;

  /* =========================================================
     COLORS — Neutrals (warm, paper-like, not pure gray)
     ========================================================= */
  --penci-paper:    #FBFAF6;   /* notebook paper background */
  --penci-paper-2:  #F5F3EC;   /* slightly darker paper */
  --penci-cloud:    #FFFFFF;   /* pure white — cards */
  --penci-ink-50:   #F3F2EE;
  --penci-ink-100: #E6E4DE;
  --penci-ink-200: #CFCDC5;
  --penci-ink-300: #A8A59C;
  --penci-ink-400: #7D7A72;
  --penci-ink-500: #565349;   /* body text */
  --penci-ink-600: #3C3A33;
  --penci-ink-700: #2A2924;   /* headings */
  --penci-ink-800: #1C1B18;
  --penci-ink-900: #0F0E0C;

  /* =========================================================
     SEMANTIC — Foreground
     ========================================================= */
  --fg-1: var(--penci-ink-700);    /* headings, primary text */
  --fg-2: var(--penci-ink-500);    /* body text */
  --fg-3: var(--penci-ink-400);    /* secondary / meta */
  --fg-4: var(--penci-ink-300);    /* placeholder / disabled */
  --fg-on-primary: #FFFFFF;
  --fg-link: var(--penci-sky-600);

  /* =========================================================
     SEMANTIC — Background
     ========================================================= */
  --bg-1: var(--penci-paper);       /* app background */
  --bg-2: var(--penci-cloud);       /* cards */
  --bg-3: var(--penci-paper-2);     /* sidebars / nested */
  --bg-hover: rgba(107, 165, 224, 0.08);
  --bg-active: rgba(107, 165, 224, 0.14);

  /* =========================================================
     SEMANTIC — Borders
     ========================================================= */
  --border-1: rgba(42, 41, 36, 0.06);   /* very soft divider */
  --border-2: rgba(42, 41, 36, 0.1);    /* card border */
  --border-3: rgba(42, 41, 36, 0.16);   /* emphasized */
  --border-focus: var(--penci-sky-400);

  /* =========================================================
     SEMANTIC — Status
     ========================================================= */
  --success: var(--penci-mint-500);
  --success-bg: var(--penci-mint-100);
  --warning: var(--penci-butter-500);
  --warning-bg: var(--penci-butter-100);
  --danger: var(--penci-rose-500);
  --danger-bg: var(--penci-rose-100);
  --info: var(--penci-sky-400);
  --info-bg: var(--penci-sky-100);

  /* =========================================================
     SEMANTIC — Brand
     ========================================================= */
  --brand: var(--penci-sky-400);
  --brand-hover: var(--penci-sky-500);
  --brand-press: var(--penci-sky-600);
  --brand-soft: var(--penci-sky-100);

  /* =========================================================
     TYPOGRAPHY — Families
     ========================================================= */
  --font-display: 'Nunito', 'Quicksand', system-ui, -apple-system, sans-serif;
  --font-body:    'Quicksand', 'Nunito', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', 'Kalam', cursive;      /* handwriting accents */
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* =========================================================
     TYPOGRAPHY — Scale (1.2 ratio, soft & comfy)
     ========================================================= */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

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

  /* =========================================================
     SPACING — 4px base, soft rhythm
     ========================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* =========================================================
     RADIUS — Soft & rounded everywhere
     ========================================================= */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;     /* standard buttons, inputs */
  --radius-lg: 20px;     /* cards */
  --radius-xl: 28px;     /* modals, large cards */
  --radius-2xl: 36px;    /* hero / callouts */
  --radius-full: 999px;

  /* =========================================================
     SHADOWS — Soft, ambient, "floating cloud"
     Never harsh; always diffuse with a slight blue tint
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(34, 61, 103, 0.05);
  --shadow-sm: 0 2px 6px rgba(34, 61, 103, 0.06), 0 1px 2px rgba(34, 61, 103, 0.04);
  --shadow-md: 0 6px 16px rgba(34, 61, 103, 0.08), 0 2px 4px rgba(34, 61, 103, 0.04);
  --shadow-lg: 0 12px 32px rgba(34, 61, 103, 0.1),  0 4px 8px rgba(34, 61, 103, 0.04);
  --shadow-xl: 0 24px 48px rgba(34, 61, 103, 0.14), 0 8px 16px rgba(34, 61, 103, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(34, 61, 103, 0.06);
  --shadow-ring: 0 0 0 4px rgba(107, 165, 224, 0.22);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   380ms;
}

/* ============================================================
   SEMANTIC TYPE — Reusable text classes
   ============================================================ */
.penci-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.penci-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.penci-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.penci-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.penci-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.penci-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.penci-body {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.penci-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.penci-meta {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.penci-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--brand);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.penci-hand {
  font-family: var(--font-hand);
  font-weight: var(--fw-regular);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.penci-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* ============================================================
   Base resets for demos
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}