/* =========================================================
   CHARNO DESIGN LANGUAGE (CDL) — Token Layer
   Single source of truth for color, type, space, radius,
   shadow, motion. Light + dark themes.
   Version 1.0
   ========================================================= */

:root {
  color-scheme: light;

  /* ---- Brand core (LOCKED — derived from official logo) ---- */
  --ch-blue: #044BFE;
  --ch-blue-strong: #033FD8;
  --ch-blue-deep: #0334B0;
  --ch-blue-soft: #EAF2FF;
  --ch-coral: #FF5A60;
  --ch-coral-strong: #EC454C;
  --ch-coral-soft: #FFF3F4;

  /* ---- Brand scales ---- */
  --ch-blue-50: #EEF4FF;
  --ch-blue-100: #DCE7FF;
  --ch-blue-200: #B9CEFF;
  --ch-blue-300: #8FAEFF;
  --ch-blue-400: #4E80FE;
  --ch-blue-500: #044BFE;
  --ch-blue-600: #033FD8;
  --ch-blue-700: #0334B0;
  --ch-blue-800: #06297F;
  --ch-blue-900: #082155;

  --ch-coral-50: #FFF1F1;
  --ch-coral-100: #FFE0E1;
  --ch-coral-200: #FFC2C5;
  --ch-coral-300: #FF9CA0;
  --ch-coral-400: #FF7A80;
  --ch-coral-500: #FF5A60;
  --ch-coral-600: #EC454C;
  --ch-coral-700: #C73339;
  --ch-coral-800: #9A272C;
  --ch-coral-900: #6E1C1F;

  /* ---- Neutral scale ---- */
  --ch-n-0: #FFFFFF;
  --ch-n-25: #FBFCFE;
  --ch-n-50: #F8FAFC;
  --ch-n-100: #F1F5F9;
  --ch-n-150: #E9EFF6;
  --ch-n-200: #E2E8F0;
  --ch-n-300: #CBD5E1;
  --ch-n-400: #94A3B8;
  --ch-n-500: #64748B;
  --ch-n-600: #475569;
  --ch-n-700: #334155;
  --ch-n-800: #1E293B;
  --ch-n-900: #0B1220;

  /* ---- Semantic tokens (LIGHT) ---- */
  --ch-bg: #F8FAFC;
  --ch-bg-2: #EEF3F9;
  --ch-bg-3: #F4F7FB;
  --ch-surface: #FFFFFF;
  --ch-surface-2: #FBFCFE;
  --ch-surface-glass: rgba(255, 255, 255, 0.72);
  --ch-field-blue: #EAF2FF;
  --ch-field-coral: #FFF3F4;

  --ch-ink: #0B1220;
  --ch-ink-soft: #23304A;
  --ch-muted: #64748B;
  --ch-muted-2: #8592A6;

  --ch-line: rgba(4, 75, 254, 0.12);
  --ch-line-soft: rgba(11, 18, 32, 0.08);
  --ch-line-strong: rgba(11, 18, 32, 0.16);
  --ch-ring: rgba(4, 75, 254, 0.4);

  --ch-accent: var(--ch-blue);
  --ch-accent-contrast: #FFFFFF;

  --ch-shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.05);
  --ch-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.04), 0 4px 12px rgba(11, 18, 32, 0.06);
  --ch-shadow-md: 0 12px 30px rgba(11, 18, 32, 0.09);
  --ch-shadow-lg: 0 30px 70px rgba(16, 38, 96, 0.14);
  --ch-shadow-art: 0 40px 80px -30px rgba(4, 75, 254, 0.35), 0 20px 50px -25px rgba(255, 90, 96, 0.28);

  --ch-grid-line: rgba(4, 75, 254, 0.09);
  --ch-noise-opacity: 0.035;

  /* ---- Typography ---- */
  --ch-font-display: "Estedad", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ch-font-hero: "Readex Pro", "Estedad", "Vazirmatn", system-ui, sans-serif;
  --ch-font-body: "Vazirmatn", "Estedad", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ch-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Consolas", monospace;

  --ch-text-2xs: clamp(0.7rem, 0.1vw + 0.68rem, 0.76rem);
  --ch-text-xs: clamp(0.78rem, 0.1vw + 0.75rem, 0.85rem);
  --ch-text-sm: clamp(0.86rem, 0.15vw + 0.82rem, 0.95rem);
  --ch-text-md: clamp(0.96rem, 0.25vw + 0.88rem, 1.06rem);
  --ch-text-lg: clamp(1.06rem, 0.5vw + 0.9rem, 1.25rem);
  --ch-text-xl: clamp(1.3rem, 1vw + 1rem, 1.7rem);
  --ch-display-1: clamp(2.1rem, 4.8vw, 4.2rem);
  --ch-display-2: clamp(1.6rem, 2.6vw + 0.9rem, 2.8rem);
  --ch-display-3: clamp(1.3rem, 1.8vw + 0.8rem, 2rem);

  /* ---- Spacing scale (4pt) ---- */
  --ch-space-1: 4px;
  --ch-space-2: 8px;
  --ch-space-3: 12px;
  --ch-space-4: 16px;
  --ch-space-5: 20px;
  --ch-space-6: 24px;
  --ch-space-8: 32px;
  --ch-space-10: 40px;
  --ch-space-12: 48px;
  --ch-space-16: 64px;
  --ch-space-20: 80px;
  --ch-space-24: 96px;
  --ch-space-32: 128px;

  --ch-section-y: clamp(56px, 8vw, 128px);
  --ch-container: 1240px;
  --ch-gutter: clamp(18px, 4vw, 48px);

  /* ---- Radius ---- */
  --ch-r-xs: 8px;
  --ch-r-sm: 12px;
  --ch-r-md: 16px;
  --ch-r-lg: 22px;
  --ch-r-xl: 30px;
  --ch-r-2xl: 40px;
  --ch-r-pill: 999px;

  /* ---- Motion ---- */
  --ch-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ch-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ch-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ch-dur-fast: 140ms;
  --ch-dur: 260ms;
  --ch-dur-slow: 520ms;
  --ch-dur-xslow: 900ms;

  --ch-z-atmosphere: -1;
  --ch-z-decor: 1;
  --ch-z-base: 2;
  --ch-z-header: 50;
  --ch-z-loader: 90;
  --ch-z-cursor: 100;
}

/* =========================================================
   DARK THEME
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ch-bg: #070B14;
  --ch-bg-2: #0B1120;
  --ch-bg-3: #0E1526;
  --ch-surface: #111A2E;
  --ch-surface-2: #0D1526;
  --ch-surface-glass: rgba(14, 21, 38, 0.7);
  --ch-field-blue: rgba(4, 75, 254, 0.16);
  --ch-field-coral: rgba(255, 90, 96, 0.12);

  --ch-ink: #F1F5F9;
  --ch-ink-soft: #CBD5E1;
  --ch-muted: #94A3B8;
  --ch-muted-2: #64748B;

  --ch-line: rgba(78, 128, 254, 0.22);
  --ch-line-soft: rgba(148, 163, 184, 0.16);
  --ch-line-strong: rgba(148, 163, 184, 0.3);
  --ch-ring: rgba(120, 160, 255, 0.6);

  --ch-accent: #4E80FE;
  --ch-accent-contrast: #06122E;

  --ch-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ch-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.4);
  --ch-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.5);
  --ch-shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.6);
  --ch-shadow-art: 0 40px 90px -30px rgba(78, 128, 254, 0.5), 0 20px 60px -25px rgba(255, 90, 96, 0.35);

  --ch-grid-line: rgba(120, 160, 255, 0.12);
  --ch-noise-opacity: 0.06;
}

/* Smooth theme transition (only when user toggles) */
:root[data-theme-ready] *,
:root[data-theme-ready] *::before,
:root[data-theme-ready] *::after {
  transition: background-color var(--ch-dur) var(--ch-ease-out),
    border-color var(--ch-dur) var(--ch-ease-out),
    color var(--ch-dur) var(--ch-ease-out);
}