@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Caveat:wght@700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --font-body: 'Nunito', 'Kanit', sans-serif;
  --font-display: 'Caveat', cursive;

  --screen-padding: clamp(0px, 2.4vw, 24px);
  --app-max-width: 420px;
  --content-max-width: 900px;
  --content-max-width-wide: 1200px;

  --color-bg-app: #f0ebe0;
  --color-bg-surface: #faf6ee;
  --color-bg-paper: #f7f1e4;
  --color-bg-card: #ffffff;
  --color-bg-soft-blue: #eef5ff;
  --color-bg-soft-cream: #f8fafc;

  --color-primary: #2a6db5;
  --color-primary-soft: #5b9bd5;
  --color-primary-deep: #20354f;
  --color-accent-lime: #d0ff13;
  --color-accent-orange: #e05800;

  --color-text: #333333;
  --color-text-strong: #1a3a5f;
  --color-text-muted: #677b92;
  --color-text-subtle: #94a3b8;
  --color-border-soft: #d4dfeb;
  --color-border-input: #ccd3dc;

  --color-success: #2e7d4e;
  --color-success-bg: #d4edda;
  --color-warning: #856404;
  --color-warning-bg: #fff3cd;
  --color-danger: #b22c2c;
  --color-danger-bg: #fde2e2;
  --color-info: #245f9b;
  --color-info-bg: #e5f2ff;

  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 24px rgba(17, 44, 74, 0.08);
  --shadow-card: 0 18px 42px rgba(17, 44, 74, 0.08);
  --shadow-primary: 0 4px 12px rgba(42, 109, 181, 0.3);
  --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.15);

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
}