/* Insightix design system tokens (from the claude.ai/design "Insightix Design System" project). */

:root {
  /* Brand — sampled from the logo */
  --ix-red: #BE1F2E;
  --ix-red-deep: #921A1F;
  --ix-charcoal: #231F20;
  --ix-white: #FFFFFF;
  /* Red ramp */
  --ix-red-50: #FBEDEE;
  --ix-red-100: #F5D3D6;
  --ix-red-200: #E8A3A9;
  --ix-red-500: #BE1F2E;
  --ix-red-600: #A81C29;
  --ix-red-700: #921A1F;
  --ix-red-900: #5C1014;
  /* Warm neutrals */
  --ix-neutral-0: #FFFFFF;
  --ix-neutral-25: #FAF9F9;
  --ix-neutral-50: #F4F3F3;
  --ix-neutral-100: #E9E7E7;
  --ix-neutral-200: #D6D3D3;
  --ix-neutral-400: #9A9596;
  --ix-neutral-500: #6E696A;
  --ix-neutral-700: #433E3F;
  --ix-neutral-900: #231F20;
  /* Status */
  --ix-success: #2E7D4F;
  --ix-success-bg: #E7F3EC;
  --ix-danger: var(--ix-red-deep);
  --ix-danger-bg: var(--ix-red-50);

  /* Semantic aliases */
  --fg-1: var(--ix-charcoal);
  --fg-2: var(--ix-neutral-700);
  --fg-3: var(--ix-neutral-500);
  --fg-on-brand: var(--ix-white);
  --bg-page: var(--ix-white);
  --bg-subtle: var(--ix-neutral-25);
  --bg-muted: var(--ix-neutral-50);
  --surface-card: var(--ix-white);
  --border-1: var(--ix-neutral-100);
  --border-2: var(--ix-neutral-200);
  --brand-primary-press: var(--ix-red-900);
  --brand-tint: var(--ix-red-50);
  --focus-ring: rgba(190, 31, 46, .35);

  /* Typography */
  --font-sans: "Readex Pro", "Noto Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;

  /* Spacing & shape */
  --container-max: 1200px;
  --gutter: 24px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-1: 0 1px 2px rgba(35, 31, 32, .06), 0 1px 3px rgba(35, 31, 32, .08);
  --shadow-2: 0 4px 12px rgba(35, 31, 32, .08);
  --shadow-3: 0 12px 32px rgba(35, 31, 32, .12);
  --overlay-scrim: rgba(35, 31, 32, .55);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Website theme layer (overrides the DS brand red with the deep red used across the site) */
  --th-bg: #FFFFFF;
  --th-ink: #231F20;
  --th-band: #921A1F;
  --th-red: #921A1F;
  --brand-primary: #921A1F;
  --brand-primary-hover: #5C1014;
  --fg-accent: #921A1F;
  --header-h: 84px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --th-bg: #171415;
  --th-ink: #F2EFEF;
  --th-band: #0F0D0D;
  --th-red: #EF5A66;
  --fg-1: #F2EFEF;
  --fg-2: #CDC7C8;
  --fg-3: #A29B9C;
  --bg-page: #171415;
  --bg-subtle: #1D191A;
  --bg-muted: #262122;
  --surface-card: #1F1B1C;
  --border-1: #322C2D;
  --border-2: #463F40;
  --ix-neutral-25: #1D191A;
  --ix-neutral-50: #262122;
  --ix-neutral-100: #322C2D;
  --ix-neutral-200: #463F40;
  --ix-red-50: #35181B;
  --ix-red-100: #5A242A;
  --brand-tint: #35181B;
  --ix-success-bg: #16291F;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, .55);
}