/* ============================================================
   Qiscus Design System 2026 — Foundations (self-hosted subset)
   Color, typography, spacing, radius, elevation tokens.
   NOTE: @font-face blocks removed for a self-contained build — the
   --font-sans / --font-mono stacks fall back to system Inter/Segoe UI /
   monospace so no external font files are fetched.
   ============================================================ */

:root {
  /* ---------- Font families ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Font weights ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Type scale ---------- */
  --t-display-1-size: 48px; --t-display-1-lh: 56px; --t-display-1-weight: var(--fw-bold);     --t-display-1-tracking: -0.5px;
  --t-display-2-size: 40px; --t-display-2-lh: 48px; --t-display-2-weight: var(--fw-bold);     --t-display-2-tracking: -0.4px;
  --t-heading-1-size: 32px; --t-heading-1-lh: 40px; --t-heading-1-weight: var(--fw-bold);     --t-heading-1-tracking: -0.2px;
  --t-heading-2-size: 28px; --t-heading-2-lh: 36px; --t-heading-2-weight: var(--fw-bold);     --t-heading-2-tracking: -0.15px;
  --t-heading-3-size: 24px; --t-heading-3-lh: 30px; --t-heading-3-weight: var(--fw-semibold); --t-heading-3-tracking: -0.15px;
  --t-heading-4-size: 20px; --t-heading-4-lh: 26px; --t-heading-4-weight: var(--fw-semibold); --t-heading-4-tracking: -0.1px;
  --t-body-1-size: 16px; --t-body-1-lh: 24px; --t-body-1-weight: var(--fw-regular); --t-body-1-tracking: 0;
  --t-body-1-semibold-weight: var(--fw-semibold);
  --t-body-2-size: 14px; --t-body-2-lh: 20px; --t-body-2-weight: var(--fw-regular); --t-body-2-tracking: 0;
  --t-body-2-semibold-weight: var(--fw-semibold);
  --t-body-3-size: 12px; --t-body-3-lh: 18px; --t-body-3-weight: var(--fw-regular); --t-body-3-tracking: 0;
  --t-body-3-semibold-weight: var(--fw-semibold);
  --t-label-1-size: 16px; --t-label-1-lh: 24px; --t-label-1-weight: var(--fw-medium); --t-label-1-tracking: -0.18px;
  --t-label-2-size: 14px; --t-label-2-lh: 20px; --t-label-2-weight: var(--fw-medium); --t-label-2-tracking: -0.16px;
  --t-label-3-size: 12px; --t-label-3-lh: 16px; --t-label-3-weight: var(--fw-medium); --t-label-3-tracking: -0.12px;
  --t-caption-1-size: 11px; --t-caption-1-lh: 16px; --t-caption-1-weight: var(--fw-regular); --t-caption-1-tracking: 0;
  --t-overline-1-size: 11px; --t-overline-1-lh: 16px; --t-overline-1-weight: var(--fw-medium); --t-overline-1-tracking: 1.1px;
  --t-button-1-size: 12px; --t-button-1-lh: 16px; --t-button-1-weight: var(--fw-semibold); --t-button-1-tracking: 0.12px;
  --t-button-2-size: 14px; --t-button-2-lh: 20px; --t-button-2-weight: var(--fw-semibold); --t-button-2-tracking: 0.14px;
  --t-button-3-size: 16px; --t-button-3-lh: 24px; --t-button-3-weight: var(--fw-semibold); --t-button-3-tracking: 0.16px;
  --t-data-1-size: 16px; --t-data-1-lh: 24px; --t-data-1-weight: var(--fw-regular); --t-data-1-semibold-weight: var(--fw-semibold);
  --t-data-2-size: 14px; --t-data-2-lh: 20px; --t-data-2-weight: var(--fw-regular); --t-data-2-semibold-weight: var(--fw-semibold);
  --t-data-3-size: 12px; --t-data-3-lh: 18px; --t-data-3-weight: var(--fw-regular);
  --t-mono-1-size: 14px; --t-mono-1-lh: 20px; --t-mono-1-weight: var(--fw-regular);
  --t-mono-2-size: 12px; --t-mono-2-lh: 18px; --t-mono-2-weight: var(--fw-regular);

  /* ---------- brand (qiscus-green teal) ---------- */
  --c-brand-50:  #E6F7F4; --c-brand-100: #CDEFE9; --c-brand-200: #9FDFD3; --c-brand-300: #6FCFBC;
  --c-brand-400: #4CC3AA; --c-brand-500: #27B199; --c-brand-600: #209C87; --c-brand-700: #1A7F6F;
  --c-brand-800: #146357; --c-brand-900: #0E4A41; --c-brand-950: #082F2A;

  /* ---------- slate ---------- */
  --c-slate-50:  #F8FAFC; --c-slate-100: #F1F5F9; --c-slate-200: #E2E8F0; --c-slate-300: #CBD5E1;
  --c-slate-400: #94A3B8; --c-slate-500: #64748B; --c-slate-600: #475569; --c-slate-700: #334155;
  --c-slate-800: #1E293B; --c-slate-900: #0F172A; --c-slate-950: #020617;

  --c-white: #FFFFFF; --c-black: #000000;

  /* ---------- green ---------- */
  --c-green-50:  #F0FDF4; --c-green-100: #DCFCE7; --c-green-200: #BBF7D0; --c-green-300: #86EFAC;
  --c-green-400: #4ADE80; --c-green-500: #22C55E; --c-green-600: #16A34A; --c-green-700: #15803D;
  --c-green-800: #166534; --c-green-900: #14532D; --c-green-950: #052E16;

  /* ---------- red ---------- */
  --c-red-50:  #FEF2F2; --c-red-100: #FEE2E2; --c-red-200: #FECACA; --c-red-300: #FCA5A5;
  --c-red-400: #F87171; --c-red-500: #EF4444; --c-red-600: #DC2626; --c-red-700: #B91C1C;
  --c-red-800: #991B1B; --c-red-900: #7F1D1D; --c-red-950: #450A0A;

  /* ---------- amber ---------- */
  --c-amber-50:  #FFFBEB; --c-amber-100: #FEF3C7; --c-amber-200: #FDE68A; --c-amber-300: #FCD34D;
  --c-amber-400: #FBBF24; --c-amber-500: #F59E0B; --c-amber-600: #D97706; --c-amber-700: #B45309;
  --c-amber-800: #92400E; --c-amber-900: #78350F; --c-amber-950: #451A03;

  /* ---------- blue ---------- */
  --c-blue-50:  #EFF6FF; --c-blue-100: #DBEAFE; --c-blue-200: #BFDBFE; --c-blue-300: #93C5FD;
  --c-blue-400: #60A5FA; --c-blue-500: #3B82F6; --c-blue-600: #2563EB; --c-blue-700: #1D4ED8;
  --c-blue-800: #1E40AF; --c-blue-900: #1E3A8A; --c-blue-950: #172554;

  /* ---------- purple ---------- */
  --c-purple-100: #F3E8FF; --c-purple-500: #A855F7; --c-purple-600: #9333EA; --c-purple-700: #7E22CE; --c-purple-800: #6B21A8;

  /* ============================================================
     SEMANTIC TOKENS — LIGHT (default)
     ============================================================ */
  --bg-primary: var(--c-white);
  --bg-secondary: var(--c-slate-50);
  --bg-tertiary: var(--c-slate-100);
  --bg-inverse: var(--c-slate-900);
  --bg-disabled: var(--c-slate-100);
  --bg-disabled-alt: var(--c-slate-200);

  --bg-brand-primary: var(--c-brand-100);
  --bg-brand-primary-hover: var(--c-brand-200);
  --bg-brand-secondary: var(--c-brand-700);
  --bg-brand-hover: var(--c-brand-800);
  --bg-brand-active: var(--c-brand-900);

  --bg-error-primary: var(--c-red-100);
  --bg-error-secondary: var(--c-red-700);
  --bg-success-primary: var(--c-green-100);
  --bg-success-secondary: var(--c-green-700);
  --bg-warning-primary: var(--c-amber-100);
  --bg-warning-secondary: var(--c-amber-700);
  --bg-info-primary: var(--c-blue-100);
  --bg-info-secondary: var(--c-blue-700);
  --bg-purple-primary: var(--c-purple-100);

  /* ---------- text ---------- */
  --text-primary: var(--c-slate-900);
  --text-secondary: var(--c-slate-600);
  --text-tertiary: var(--c-slate-500);
  --text-disabled: var(--c-slate-400);
  --text-placeholder: var(--c-slate-500);
  --text-white: var(--c-white);
  --text-inverse: var(--c-white);

  --text-brand-primary: var(--c-brand-800);
  --text-brand-secondary: var(--c-brand-900);
  --text-error-primary: var(--c-red-600);
  --text-error-secondary: var(--c-red-800);
  --text-success-primary: var(--c-green-600);
  --text-success-secondary: var(--c-green-800);
  --text-warning-primary: var(--c-amber-700);
  --text-warning-secondary: var(--c-amber-800);
  --text-info-primary: var(--c-blue-600);
  --text-info-secondary: var(--c-blue-800);

  --text-link: var(--c-blue-600);
  --text-link-hover: var(--c-blue-800);
  --text-link-active: var(--c-blue-900);

  --text-on-brand: var(--c-white);

  /* ---------- icon ---------- */
  --icon-primary: var(--c-slate-900);
  --icon-secondary: var(--c-slate-600);
  --icon-tertiary: var(--c-slate-500);
  --icon-disabled: var(--c-slate-400);
  --icon-white: var(--c-white);

  --icon-brand-primary: var(--c-brand-700);
  --icon-brand-secondary: var(--c-brand-800);
  --icon-error-primary: var(--c-red-700);
  --icon-success-primary: var(--c-green-700);
  --icon-warning-primary: var(--c-amber-700);
  --icon-info-primary: var(--c-blue-700);

  /* ---------- border ---------- */
  --border-primary: var(--c-slate-200);
  --border-secondary: var(--c-slate-300);
  --border-tertiary: var(--c-slate-400);
  --border-input: var(--c-slate-500);
  --border-disabled: var(--c-slate-300);
  --border-focus-ring: var(--c-blue-700);

  --border-brand-primary: var(--c-brand-600);
  --border-brand-secondary: var(--c-brand-700);
  --border-error-primary: var(--c-red-500);
  --border-error-subtle: var(--c-red-300);
  --border-error-secondary: var(--c-red-700);
  --border-success-primary: var(--c-green-600);
  --border-success-secondary: var(--c-green-700);
  --border-warning-primary: var(--c-amber-600);
  --border-warning-secondary: var(--c-amber-700);
  --border-info-primary: var(--c-blue-500);
  --border-info-secondary: var(--c-blue-700);

  /* ---------- indicator ---------- */
  --indicator-success: var(--c-green-600);
  --indicator-error: var(--c-red-600);
  --indicator-warning: var(--c-amber-600);
  --indicator-info: var(--c-blue-600);
  --indicator-neutral: var(--c-slate-500);

  /* ---------- spacing ---------- */
  --space-none: 0; --space-4xs: 2px; --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px;
  --space-sm: 16px; --space-md: 20px; --space-lg: 24px; --space-xl: 28px; --space-2xl: 32px;
  --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 56px; --space-6xl: 64px; --space-7xl: 80px;

  /* ---------- radius ---------- */
  --radius-none: 0; --radius-3xs: 2px; --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px;
  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px;
  --radius-4xl: 48px; --radius-full: 9999px;

  /* ---------- border width ---------- */
  --border-none: 0; --border-xs: 1px; --border-sm: 2px;

  /* ---------- opacity ---------- */
  --opacity-0: 0; --opacity-5: 0.05; --opacity-10: 0.10; --opacity-20: 0.20;
  --opacity-40: 0.40; --opacity-60: 0.60; --opacity-80: 0.80; --opacity-100: 1;

  /* ---------- elevation ---------- */
  --shadow-xs:  0px 1px 2px 0px rgba(0,0,0,0.05);
  --shadow-sm:  0px 1px 3px 0px rgba(0,0,0,0.10), 0px 1px 2px 0px rgba(0,0,0,0.05);
  --shadow-md:  0px 4px 6px -1px rgba(0,0,0,0.10), 0px 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:  0px 10px 15px -3px rgba(0,0,0,0.10), 0px 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:  0px 20px 25px -5px rgba(0,0,0,0.10), 0px 10px 10px -5px rgba(0,0,0,0.04);

  /* ---------- motion ---------- */
  --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */
[data-theme="dark"], .theme-dark {
  --bg-primary: var(--c-slate-900);
  --bg-secondary: var(--c-slate-800);
  --bg-tertiary: var(--c-slate-700);
  --bg-disabled: var(--c-slate-800);

  --bg-brand-primary: var(--c-brand-950);
  --bg-brand-secondary: var(--c-brand-500);
  --bg-brand-hover: var(--c-brand-400);
  --bg-brand-active: var(--c-brand-300);

  --bg-error-primary: var(--c-red-950);
  --bg-success-primary: var(--c-green-950);
  --bg-warning-primary: var(--c-amber-950);
  --bg-info-primary: var(--c-blue-950);

  --text-primary: var(--c-slate-50);
  --text-secondary: var(--c-slate-300);
  --text-tertiary: var(--c-slate-400);
  --text-disabled: var(--c-slate-600);

  --text-brand-primary: var(--c-brand-400);
  --text-brand-secondary: var(--c-brand-300);
  --text-error-primary: var(--c-red-400);
  --text-success-primary: var(--c-green-400);
  --text-warning-primary: var(--c-amber-400);
  --text-info-primary: var(--c-blue-400);
  --text-link: var(--c-blue-400);

  --icon-primary: var(--c-slate-50);
  --icon-secondary: var(--c-slate-300);
  --icon-tertiary: var(--c-slate-400);
  --icon-brand-primary: var(--c-brand-400);
  --icon-error-primary: var(--c-red-400);
  --icon-success-primary: var(--c-green-400);
  --icon-warning-primary: var(--c-amber-400);
  --icon-info-primary: var(--c-blue-400);

  --border-primary: var(--c-slate-700);
  --border-secondary: var(--c-slate-600);
  --border-tertiary: var(--c-slate-400);
  --border-input: var(--c-slate-500);
  --border-focus-ring: var(--c-blue-400);
  --border-brand-secondary: var(--c-brand-400);
  --border-error-subtle: var(--c-red-800);

  --indicator-success: var(--c-green-400);
  --indicator-error: var(--c-red-400);
  --indicator-warning: var(--c-amber-400);
  --indicator-info: var(--c-blue-400);
  --indicator-neutral: var(--c-slate-400);

  --shadow-sm:  0px 1px 3px 0px rgba(0,0,0,0.40), 0px 1px 2px 0px rgba(0,0,0,0.20);
  --shadow-md:  0px 4px 6px -1px rgba(0,0,0,0.40), 0px 2px 4px -1px rgba(0,0,0,0.24);
}

/* ============================================================
   Reset + base
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  background: var(--bg-primary);
}

h1 { font-family: var(--font-sans); font-weight: var(--t-heading-1-weight); font-size: var(--t-heading-1-size); line-height: var(--t-heading-1-lh); letter-spacing: var(--t-heading-1-tracking); margin: 0; }
h2 { font-family: var(--font-sans); font-weight: var(--t-heading-2-weight); font-size: var(--t-heading-2-size); line-height: var(--t-heading-2-lh); letter-spacing: var(--t-heading-2-tracking); margin: 0; }
h3 { font-family: var(--font-sans); font-weight: var(--t-heading-3-weight); font-size: var(--t-heading-3-size); line-height: var(--t-heading-3-lh); letter-spacing: var(--t-heading-3-tracking); margin: 0; }
p  { font-family: var(--font-sans); font-weight: var(--t-body-2-weight); font-size: var(--t-body-2-size); line-height: var(--t-body-2-lh); margin: 0; }