@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Fredoka+One&family=Poppins:wght@400;500;600;700&display=swap');

/* Imaigne Anything colour tokens */
:root {
  --ia-cherry: #E76F51;
  --ia-ink: #2A1E10;
  --ia-cream: #FFF3D9;
  --ia-paper: #FFFFFF;

  --ia-butter: #FFD66A;
  --ia-teal: #2A9D8F;
  --ia-leaf: #7BB369;
  --ia-sky: #4B96C4;
  --ia-bluebell: #6A7BD6;
  --ia-amber: #E9A441;
  --ia-brick: #C9493A;

  --ia-sand-50: #FFF8EC;
  --ia-sand-100: #FDE0B8;
  --ia-sand-200: #ECD9B0;
  --ia-sand-300: #C9A870;
  --ia-sand-500: #9A7354;
  --ia-sand-700: #4A3A22;

  --ia-cherry-50: #FDE2CF;
  --ia-cherry-200: #F5A78C;
  --ia-cherry-400: #EE8C6E;
  --ia-cherry-500: #E76F51;
  --ia-cherry-600: #C7603F;
  --ia-cherry-800: #8A3E22;

  --ia-bg: var(--ia-cream);
  --ia-surface: var(--ia-paper);
  --ia-surface-subtle: var(--ia-sand-50);
  --ia-text: var(--ia-ink);
  --ia-text-muted: var(--ia-sand-500);
  --ia-border: var(--ia-sand-200);
  --ia-border-strong: var(--ia-ink);
  --ia-action: var(--ia-cherry);
  --ia-action-hover: var(--ia-cherry-400);
  --ia-action-active: var(--ia-cherry-600);
  --ia-success: var(--ia-teal);
  --ia-warning: var(--ia-amber);
  --ia-danger: var(--ia-brick);
  --ia-info: var(--ia-sky);
}

html,
body {
  background: var(--ia-bg);
  color: var(--ia-text);
  font-family: 'Poppins', system-ui, sans-serif;
}

.ia-bg-cream { background: var(--ia-cream); }
.ia-bg-paper { background: var(--ia-paper); }
.ia-bg-ink { background: var(--ia-ink); color: var(--ia-cream); }
.ia-bg-cherry { background: var(--ia-cherry); color: #fff; }
.ia-bg-butter { background: var(--ia-butter); color: var(--ia-ink); }

.ia-text-ink { color: var(--ia-ink); }
.ia-text-muted { color: var(--ia-text-muted); }
.ia-text-cherry { color: var(--ia-cherry); }

.ia-border { border: 1px solid var(--ia-border); }
.ia-border-strong { border: 2px solid var(--ia-border-strong); }