/* ============================================================
   Kilken Design Tokens — AGENTiX / DRi Homepage Design System
   Premium minimal tech · Black + White + DRi Cyan · Inter
   ============================================================ */

:root {
  color-scheme: light;

  /* Core (HSL channels, consumed via hsl(var(--token))) */
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;

  --primary: 190 100% 50%;          /* DRi Cyan ~ #00D4FF */
  --primary-foreground: 0 0% 0%;

  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 0%;

  --muted-hsl: 0 0% 96%;
  --muted-foreground: 0 0% 45%;

  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 190 100% 50%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 0%;

  --radius: 0.5rem;                 /* 8px */

  /* Convenience hex mirrors */
  --black: #000000;
  --white: #ffffff;
  --gray-soft: #f5f5f5;
  --gray-hover: #fafafa;
  --gray-border: #e5e5e5;
  --gray-strong-border: #d4d4d4;
  --gray-muted-text: #737373;
  --cyan: hsl(190 100% 50%);
  --cyan-soft: hsl(190 100% 70%);
  --cyan-ink: #0a6b82;              /* cyan-family text that stays legible on white */
  --cyan-tint: hsl(190 100% 50% / 0.10);
  --cyan-tint-strong: hsl(190 100% 50% / 0.18);
  --cyan-edge: hsl(190 100% 50% / 0.35);

  /* Dark sections (sidebar, auth, hero): text on them stays white in both themes */
  --on-dark: #ffffff;
  --dark-bg: #000000;
  --dark-card: #0d0d0d;
  --dark-border: rgba(255, 255, 255, 0.15);
  --dark-muted-text: rgba(255, 255, 255, 0.70);

  /* Accent gradient (cyan only — NOT the DRi X rainbow) */
  --accent-gradient: linear-gradient(135deg, hsl(190 100% 50%), hsl(190 100% 70%));

  /* Status / chart palette */
  --chart-primary: hsl(190 100% 50%);
  --chart-dark: #000000;
  --chart-muted: #a3a3a3;
  --success: #22c55e;
  --success-ink: #0f7a3d;
  --success-tint: #ecfdf3;
  --success-edge: #c9f0d6;
  --warning: #f59e0b;
  --warning-ink: #92400e;
  --warning-tint: #fffbeb;
  --warning-edge: #fde8bd;
  --danger: #ef4444;
  --danger-ink: #b42318;
  --danger-tint: #fef3f2;
  --danger-edge: #fdd8d3;

  /* Spacing scale (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-card: 0 20px 50px -10px rgb(0 0 0 / 0.08), 0 0 30px hsl(190 100% 50% / 0.08);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
  --shadow-pop: 0 30px 80px -20px rgb(0 0 0 / 0.4);

  /* Layout */
  --sidebar-width: 264px;
  --topbar-height: 64px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-slow: 0.6s;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ------------------------------------------------------------
     Legacy Kilken aliases — page scripts, inline styles and older
     markup still read these names. They resolve to AGENTiX values
     so everything inherits the same palette.
     ------------------------------------------------------------ */
  --bg: var(--gray-soft);
  --bg-2: var(--white);
  --panel: var(--white);
  --panel-edge: var(--gray-border);
  --text: var(--black);
  --muted: var(--gray-muted-text);
  --accent: var(--cyan);
  --green: var(--success);
  --red: var(--danger);
  --amber: var(--warning);
  --shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------
   Dark theme (default; mock-up palette). Only token values change:
   --white is the card surface and --black the ink, so every page that
   reads the tokens flips with them. The toggle sets data-theme on <html>.
   ------------------------------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --background: 225 18% 4%;
  --foreground: 216 18% 93%;
  --primary-foreground: 195 80% 6%;
  --secondary: 216 14% 11%;
  --secondary-foreground: 216 18% 93%;
  --muted-hsl: 216 14% 11%;
  --muted-foreground: 211 10% 64%;
  --border: 214 13% 17%;
  --input: 214 13% 17%;
  --card: 216 17% 9%;
  --card-foreground: 216 18% 93%;

  --black: #eaedf1;
  --white: #14171c;
  --gray-soft: #090a0d;
  --gray-hover: #181c22;
  --gray-border: #252a31;
  --gray-strong-border: #353c46;
  --gray-muted-text: #98a2ad;
  --cyan: #19d3f5;
  --cyan-soft: hsl(190 92% 70%);
  --cyan-ink: #19d3f5;
  --cyan-tint: hsl(190 92% 53% / 0.12);
  --cyan-tint-strong: hsl(190 92% 53% / 0.22);
  --cyan-edge: hsl(190 92% 53% / 0.4);

  --dark-bg: #0c0e12;
  --dark-card: #14171c;
  --dark-border: rgba(255, 255, 255, 0.12);

  --chart-dark: #eaedf1;
  --chart-muted: #6b7480;
  --success: #3fd087;
  --success-ink: #3fd087;
  --success-tint: #0f2e1c;
  --success-edge: #1f5a3a;
  --warning: #f0b52f;
  --warning-ink: #f0b52f;
  --warning-tint: #382c0f;
  --warning-edge: #6b5419;
  --danger: #ff5b60;
  --danger-ink: #ff6b70;
  --danger-tint: #3a1618;
  --danger-edge: #6e2a2e;

  --shadow-card: 0 20px 50px -10px rgb(0 0 0 / 0.55), 0 0 30px hsl(190 100% 50% / 0.06);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
  --shadow-pop: 0 30px 80px -20px rgb(0 0 0 / 0.7);
}