@import 'tailwindcss';
@import 'tw-animate-css';
/* Zero-config for consumers: Tailwind v4 skips node_modules by default, so
   point it at this package's own dist — resolved relative to THIS file, i.e.
   node_modules/@arkite-ui/core/dist when installed (repo dist in dev). */
@source '../../dist';

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

/*
 * Theme tokens — @theme maps CSS variables to Tailwind utilities.
 * e.g. --color-primary → bg-primary, text-primary, border-primary
 */
@theme {
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  /* Solid-fill hover: DARKEN, never fade (#27). The old hover:bg-primary/90 lightened
     the fill on a white page and dropped white text below WCAG AA (default primary
     5.11 -> 4.31:1). Mixing 12% black in oklab only raises text contrast, and follows
     any brand override of --primary / --destructive automatically. Override these two
     tokens to tune the hover shade; keep HOVER_MIX in theme/contrast.ts in sync. */
  --color-primary-hover: color-mix(in oklab, var(--color-primary) 88%, black);
  --color-destructive-hover: color-mix(in oklab, var(--color-destructive) 88%, black);

  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));

  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));

  --color-info: hsl(var(--info));
  --color-info-foreground: hsl(var(--info-foreground));

  /* Status soft layer — pale background / readable text / pale border */
  --color-success-soft: hsl(var(--success-soft));
  --color-success-soft-foreground: hsl(var(--success-soft-foreground));
  --color-success-border: hsl(var(--success-border));
  --color-warning-soft: hsl(var(--warning-soft));
  --color-warning-soft-foreground: hsl(var(--warning-soft-foreground));
  --color-warning-border: hsl(var(--warning-border));
  --color-destructive-soft: hsl(var(--destructive-soft));
  --color-destructive-soft-foreground: hsl(var(--destructive-soft-foreground));
  --color-destructive-border: hsl(var(--destructive-border));
  --color-info-soft: hsl(var(--info-soft));
  --color-info-soft-foreground: hsl(var(--info-soft-foreground));
  --color-info-border: hsl(var(--info-border));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  /* Chart palette — for Recharts / Nivo / any charting library */
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  /* Status palette — for Avatar dots, Badge, Table status columns */
  --color-status-online: hsl(var(--status-online));
  --color-status-offline: hsl(var(--status-offline));
  --color-status-busy: hsl(var(--status-busy));
  --color-status-away: hsl(var(--status-away));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Typography — extra-small size below text-xs */
  --text-2xs: 0.625rem;
  --text-2xs--line-height: 0.875rem;

  --font-sans: 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;

  /* Elevation — Z-axis shadow system */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.18);

  /* Structural shadows — Table sticky column/header separators */
  --shadow-sticky-left: -2px 0 4px -2px rgb(0 0 0 / 0.1);
  --shadow-sticky-right: 2px 0 4px -2px rgb(0 0 0 / 0.1);
  --shadow-sticky-header: 0 1px 0 0 hsl(var(--border));

  /* Transition tokens */
  --transition-timing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-timing-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-timing-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-duration-fast: 100ms;
  --transition-duration-normal: 150ms;
  --transition-duration-slow: 300ms;

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-shimmer: shimmer 2s infinite;
  --animate-spin: spin 1s linear infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

/* Design token values — light mode */
:root {
  /* Brand Primary */
  --primary: 250 100% 65%;
  --primary-foreground: 0 0% 100%;

  /* Secondary */
  --secondary: 220 14% 96%;
  --secondary-foreground: 220 9% 35%;

  /* Accent */
  --accent: 168 80% 45%;
  --accent-foreground: 0 0% 0%;

  /* Success */
  --success: 145 65% 42%;
  --success-foreground: 0 0% 0%;

  /* Warning */
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 0%;

  /* Destructive */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  /* Info */
  --info: 217 91% 53%;
  --info-foreground: 0 0% 100%;

  /* Status soft layer */
  --success-soft: 138 76% 97%;
  --success-soft-foreground: 143 64% 24%;
  --success-border: 141 79% 85%;
  --warning-soft: 55 92% 95%;
  --warning-soft-foreground: 32 81% 29%;
  --warning-border: 53 98% 77%;
  --destructive-soft: 0 86% 97%;
  --destructive-soft-foreground: 0 70% 35%;
  --destructive-border: 0 96% 89%;
  --info-soft: 214 100% 97%;
  --info-soft-foreground: 226 71% 40%;
  --info-border: 213 97% 87%;

  /* Neutral */
  --background: 0 0% 100%;
  --foreground: 220 15% 20%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 40%;

  /* Card */
  --card: 0 0% 100%;
  --card-foreground: 220 15% 20%;

  /* Border & Input */
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 250 100% 65%;

  /* Chart */
  --chart-1: 250 100% 65%;
  --chart-2: 168 80% 45%;
  --chart-3: 38 92% 50%;
  --chart-4: 280 65% 60%;
  --chart-5: 200 80% 50%;

  /* Status */
  --status-online: 145 65% 42%;
  --status-offline: 220 9% 46%;
  --status-busy: 0 72% 51%;
  --status-away: 38 92% 50%;

  /* Radius */
  --radius: 0.5rem;
}

/* Design token values — dark mode */
.dark {
  --primary: 250 100% 67%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 15% 18%;
  --secondary-foreground: 0 0% 95%;

  --accent: 168 80% 50%;
  --accent-foreground: 0 0% 0%;

  --success: 145 65% 50%;
  --success-foreground: 0 0% 0%;

  --warning: 38 92% 55%;
  --warning-foreground: 0 0% 0%;

  --destructive: 0 72% 53%;
  --destructive-foreground: 0 0% 100%;

  --info: 217 91% 60%;
  --info-foreground: 0 0% 0%;

  /* Status soft layer */
  --success-soft: 145 80% 10%;
  --success-soft-foreground: 141 79% 85%;
  --success-border: 144 61% 20%;
  --warning-soft: 26 83% 14%;
  --warning-soft-foreground: 53 98% 77%;
  --warning-border: 28 73% 26%;
  --destructive-soft: 0 75% 15%;
  --destructive-soft-foreground: 0 96% 89%;
  --destructive-border: 0 63% 31%;
  --info-soft: 226 57% 21%;
  --info-soft-foreground: 213 97% 87%;
  --info-border: 224 64% 33%;

  --background: 220 20% 10%;
  --foreground: 0 0% 95%;
  --muted: 220 15% 18%;
  --muted-foreground: 220 9% 60%;

  --card: 220 18% 13%;
  --card-foreground: 0 0% 95%;

  --border: 220 15% 22%;
  --input: 220 15% 22%;
  --ring: 250 100% 67%;

  --chart-1: 250 100% 70%;
  --chart-2: 168 80% 55%;
  --chart-3: 38 92% 55%;
  --chart-4: 280 65% 68%;
  --chart-5: 200 80% 58%;

  /* Status */
  --status-online: 145 65% 50%;
  --status-offline: 220 9% 60%;
  --status-busy: 0 72% 55%;
  --status-away: 38 92% 55%;
}

/* Base styles */
@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }
}

/* Gradient utilities */
@utility gradient-primary {
  background: linear-gradient(135deg, #635bff 0%, #7b73ff 100%);
}

@utility gradient-accent {
  background: linear-gradient(135deg, #00d4aa 0%, #00bfff 100%);
}

@utility gradient-mesh {
  background:
    radial-gradient(at 40% 20%, rgba(99, 91, 255, 0.2) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(0, 212, 170, 0.13) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(245, 166, 35, 0.13) 0px, transparent 50%);
}

@utility bg-stripes {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

@utility animate-stripes {
  animation: stripes 1s linear infinite;
}

@utility animate-progress-indeterminate {
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1rem 0;
  }
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}