/* Kazi IT Studio — design tokens
   Dark is the default theme. Add data-theme="light" on any element to switch that area to light. */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Anek+Bangla:wght@400;500;600;700;800&display=swap");

:root {
  /* Signature glow */
  --kz-amber: #FFB547;
  --kz-orange: #FF6B1A;
  --kz-ember: #E8381A;
  --kz-glow: linear-gradient(180deg, #FFB547 0%, #FF6B1A 55%, #E8381A 100%);
  --kz-orb: radial-gradient(circle at 36% 30%, #FFB547 0%, #FF6B1A 50%, #E8381A 100%);
  --kz-halo: radial-gradient(circle, rgba(255, 107, 26, .55) 0%, rgba(232, 56, 26, .18) 45%, rgba(232, 56, 26, 0) 70%);

  /* Orange ramp */
  --kz-orange-50: #FFF4EC;
  --kz-orange-100: #FFE3CC;
  --kz-orange-200: #FFC799;
  --kz-orange-300: #FFA866;
  --kz-orange-400: #FF8A3D;
  --kz-orange-500: #FF6B1A;
  --kz-orange-600: #E8530F;
  --kz-orange-700: #C2400B;
  --kz-orange-800: #8F2F0A;
  --kz-orange-900: #5C1F08;

  /* Theme (dark default) */
  --kz-bg: #0A0A0B;
  --kz-surface: #141416;
  --kz-card: #1F1F23;
  --kz-border: #2E2E33;
  --kz-muted: #8A8A93;
  --kz-text: #F5F3F0;
  --kz-accent: var(--kz-orange-500);      /* orange used for text/icons */
  --kz-accent-fill: var(--kz-orange-500); /* orange used for buttons */
  --kz-on-accent: #0A0A0B;                /* text on orange buttons: always dark */

  /* Type */
  --kz-font-display: "Plus Jakarta Sans", "Anek Bangla", system-ui, sans-serif;
  --kz-font-bangla: "Anek Bangla", "Plus Jakarta Sans", system-ui, sans-serif;
  --kz-font-body: "Plus Jakarta Sans", "Anek Bangla", system-ui, sans-serif;

  /* Shape */
  --kz-radius-sm: 10px;
  --kz-radius: 16px;
  --kz-radius-lg: 28px;
  --kz-radius-pill: 999px;
}

[data-theme="light"] {
  --kz-bg: #FAF7F2;
  --kz-surface: #FFFFFF;
  --kz-card: #F0EBE3;
  --kz-border: #E2DBD0;
  --kz-muted: #6B6560;
  --kz-text: #141210;
  --kz-accent: var(--kz-orange-600);
  --kz-accent-fill: var(--kz-orange-500);
  --kz-on-accent: #0A0A0B;
  --kz-halo: radial-gradient(circle, rgba(255, 168, 102, .55) 0%, rgba(255, 199, 153, .25) 45%, rgba(255, 199, 153, 0) 70%);
}