/* ============================================================
   KETCHUP AI — Colors & Type Foundations (site build)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }

:root {
  /* BRAND: Coral / Tomato */
  --coral-50:  #FFF3EE;
  --coral-100: #FFE3D6;
  --coral-200: #FFC8B0;
  --coral-300: #FFA585;
  --coral-400: #FB7F52;
  --coral-500: #F0532A;
  --coral-600: #DB4015;
  --coral-700: #B53210;
  --coral-800: #8F2912;
  --coral-900: #6E2412;

  --grad-ketchup: linear-gradient(165deg, #F55D2B 0%, #F87E50 45%, #FBB086 100%);
  --grad-ketchup-soft: linear-gradient(165deg, #FB7F52 0%, #FBB086 100%);

  --amber-50:  #FFF4E3;
  --amber-100: #FDEFD2;
  --amber-300: #FBD79A;
  --amber-500: #ECA63B;
  --amber-600: #CE8617;
  --cream: #FFF4E3;

  /* NEUTRALS: warm stone */
  --stone-0:   #FFFFFF;
  --stone-50:  #FAF8F6;
  --stone-100: #F4F1ED;
  --stone-200: #E8E3DD;
  --stone-300: #D6CFC6;
  --stone-400: #B3A99D;
  --stone-500: #8A7F72;
  --stone-600: #645B50;
  --stone-700: #463F38;
  --stone-800: #2B2622;
  --stone-900: #1A1614;

  /* SEMANTIC */
  --success-50:#E9F7F0; --success-500:#1F9D6B; --success-700:#136B49;
  --warning-50:#FCF3E1; --warning-500:#D98A0B; --warning-700:#97600A;
  --danger-50:#FCEBEC;  --danger-500:#CC2936;  --danger-700:#8E1C26;
  --info-50:#E9F0FC;    --info-500:#2563C9;    --info-700:#18458F;

  --bg: var(--stone-50);
  --bg-elevated: var(--stone-0);
  --bg-sunken: var(--stone-100);
  --bg-inverse: var(--stone-900);

  --fg1: var(--stone-900);
  --fg2: var(--stone-600);
  --fg3: var(--stone-500);
  --fg-on-coral: #FFFFFF;
  --fg-inverse: var(--stone-50);

  --border: var(--stone-200);
  --border-strong: var(--stone-300);
  --focus-ring: var(--coral-400);

  --accent: var(--coral-500);
  --accent-hover: var(--coral-600);
  --accent-press: var(--coral-700);
  --accent-weak: var(--coral-50);

  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px;
  --text-xl:22px; --text-2xl:28px; --text-3xl:36px; --text-4xl:46px;
  --text-5xl:60px; --text-6xl:76px;

  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relax:1.7;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-normal:0;
  --tracking-wide:0.04em; --tracking-caps:0.08em;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-extra:800;

  --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; --space-24:96px;

  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-pill:999px;

  --shadow-xs: 0 1px 2px rgba(26,22,20,0.05);
  --shadow-sm: 0 1px 3px rgba(26,22,20,0.07), 0 1px 2px rgba(26,22,20,0.04);
  --shadow-md: 0 4px 12px rgba(26,22,20,0.08), 0 2px 4px rgba(26,22,20,0.05);
  --shadow-lg: 0 12px 28px rgba(26,22,20,0.12), 0 4px 8px rgba(26,22,20,0.06);
  --shadow-coral: 0 6px 18px rgba(240,83,42,0.28);
  --ring-focus: 0 0 0 3px rgba(251,127,82,0.40);
}