/* Telescope UI — design tokens (shipped to consumers as `@slm-solusi-digital/telescope-ui/theme.css`).
 *
 * Import this once in your app's Tailwind entry CSS, after `@import "tailwindcss"` and your
 * HeroUI `@plugin`:
 *
 *   @import "tailwindcss";
 *   @import "@slm-solusi-digital/telescope-ui/theme.css";
 *   @plugin "@heroui/react";
 *   @source "../node_modules/@heroui/theme/dist";
 *   @source "../node_modules/@slm-solusi-digital/telescope-ui/dist";
 *
 * Colors are runtime CSS vars (raw `R G B` triples) so light/dark switch live via the `.dark`
 * class — no rebuild needed. HeroUI's own palette is remapped to these vars via `@theme inline`.
 */

@custom-variant dark (&:is(.dark, .dark *));

/* Map HeroUI color utilities to runtime CSS vars so light/dark overrides stay live.
   No <alpha-value> placeholder: in v4 opacity modifiers (e.g. bg-background/70) are handled
   automatically via color-mix. */
@theme inline {
  --color-primary: rgb(var(--primary));
  --color-secondary: rgb(var(--secondary));
  --color-background: rgb(var(--background));
  --color-foreground: rgb(var(--foreground));
  --color-divider: rgb(var(--divider));
  --color-overlay: rgb(var(--overlay));
  --color-focus: rgb(var(--focus));
  --color-content1: rgb(var(--content1));
  --color-content2: rgb(var(--content2));
  --color-content3: rgb(var(--content3));
  --color-content4: rgb(var(--content4));
  --color-success: rgb(var(--success));
  --color-warning: rgb(var(--warning));
  --color-danger: rgb(var(--danger));
}

@theme {
  --text-xxs: 11px;
  --text-xxs--line-height: 1rem;
  --text-xxxs: 10px;
  --text-xxxs--line-height: 1rem;
}

@layer base {
  *,
  ::before,
  ::after {
    @apply border-[#E7E9ED] dark:border-[#3A3D42];
  }

  [data-slot="label"] {
    @apply !text-sm font-medium;
  }

  [aria-label*="Today"] {
    @apply border border-blue-400;
  }
}

:root {
  --primary: 19 79 238;
  --secondary: 164 204 252;
  --background: 237 240 245;
  --foreground: 29 41 61;
  --divider: 229 231 235;
  --overlay: 0 0 0;
  --focus: 147 197 253;
  --content1: 249 250 251;
  --content2: 243 244 246;
  --content3: 229 231 235;
  --content4: 156 163 175;
  --success: 34 197 94;
  --warning: 234 179 8;
  --danger: 239 68 68;
}

.dark {
  --primary: 19 79 238;
  --secondary: 156 163 175;
  --background: 17 24 39;
  --foreground: 243 244 246;
  --divider: 55 65 81;
  --overlay: 0 0 0;
  --focus: 147 197 253;
  --content1: 31 41 55;
  --content2: 55 65 81;
  --content3: 75 85 99;
  --content4: 156 163 175;
  --success: 34 197 94;
  --warning: 234 179 8;
  --danger: 239 68 68;
}