@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');
/* rojak.app design tokens - single source of truth, included by landing + studio.
   Action colour (orange) is never the brand colour (green). See CLAUDE.md QA gate
   + DESIGN_SYSTEM_ROJAK.md (app-wide design system, 2026-06-21). */
:root {
  /* --- brand (unchanged, canonical) --- */
  --rojak-green-900: #062413; /* deep - dark surfaces */
  --rojak-green-700: #0F5B3A;
  --rojak-green-500: #1FA66F; /* primary green - structure (NOT 1d9e75) */
  --rojak-green-300: #4ade80; /* bright - highlight on dark only */
  --rojak-orange:    #ff6b00; /* THE action colour - buttons, links, key actions */
  --rojak-orange-2:  #ffae00;
  --rojak-cream:     #fefce8;

  /* --- design system additions (2026-06-21) --- */
  /* fonts */
  --font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* type scale (one scale, no off-scale sizes) */
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px;
  /* radius scale (matches studio) */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px;
  /* on-dark text for green-900 surfaces (all clear WCAG AA) */
  --on-dark: #eaf3ed; --on-dark-soft: #bcd6c6; --on-dark-mute: #8fb3a1;
}