@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Nunito:wght@600;700&family=Quicksand:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --font-display: 'Fredoka', sans-serif;
  --font-body: 'Quicksand', sans-serif;
  --font-accent: 'Nunito', sans-serif;
  --font-mono: "SFMono-Regular", "Roboto Mono", "Cascadia Code", monospace;

  --primary: #F8A5B8;
  --primary-light: #FFCAD4;
  --primary-dark: #E8899C;
  --secondary: #7BC8F6;
  --secondary-light: #A5DDFB;
  --secondary-dark: #4D99C8;
  --accent: #C9A0DC;
  --accent-light: #DFC5EC;
  --accent-dark: #A87DC2;
  --gold: #F5D76E;
  --success: #8ED16C;
  --success-dark: #5F9F42;
  --warning: #D15F3D;
  --danger: #B9344D;
  --bg-main: #FFF9F5;
  --bg-soft: #FFF5F8;
  --bg-cool: #F0F8FF;
  --bg-gradient: linear-gradient(135deg, #FFF9F5 0%, #F0F8FF 50%, #FFF5F8 100%);
  --card-bg: #FFFFFF;
  --card-bg-translucent: rgba(255, 255, 255, 0.9);
  --card-bg-strong: rgba(255, 255, 255, 0.96);
  --border: #F0E6EB;
  --shadow: rgba(248, 165, 184, 0.15);
  --text-dark: #5D4E60;
  --text-medium: #6B5C70;
  --text-light: #807084;
  --text-link: #6A5BAF;
  --focus-ring: #5A4EA3;

  --radius-small: 10px;
  --radius-medium: 14px;
  --radius-large: 20px;
  --radius-xl: 24px;
  --radius-panel: 28px;
  --radius-full: 9999px;

  --max-article: 900px;
  --max-hub: 1100px;
  --max-wide: 1400px;
  --max-explorer: 1400px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --shadow-soft: 0 18px 55px var(--shadow);
  --shadow-card: 0 10px 30px rgba(93, 78, 96, 0.08);
  --shadow-hover: 0 16px 34px rgba(93, 78, 96, 0.11);

  --color-page: var(--bg-main);
  --color-page-soft: var(--bg-soft);
  --color-surface: var(--card-bg);
  --color-surface-strong: var(--card-bg-strong);
  --color-surface-soft: color-mix(in srgb, var(--card-bg) 76%, var(--bg-cool) 24%);
  --color-text: var(--text-dark);
  --color-text-muted: var(--text-medium);
  --color-text-soft: var(--text-light);
  --color-border: var(--border);
  --color-accent: var(--secondary);
  --color-accent-strong: var(--secondary-dark);
  --color-warning: var(--gold);
  --color-danger: var(--danger);
  --color-violet: var(--accent);
  --color-sand: #8A6A2F;
  --radius-pill: var(--radius-full);
}