@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn-svelte/tailwind.css";

@import "./claddcn.css";
@custom-variant dark (&:is(.dark *));

:root {
  --ff-brand: oklch(0.57 0.105 240);
  --ff-brand-deep: oklch(0.5 0.1 240);
  --ff-on-brand: oklch(0.99 0.01 240);
  --ff-income: oklch(0.5 0.12 145);
  --ff-expense: oklch(0.52 0.15 28);
  --ff-transfer: oklch(0.5 0.085 225);
  --ff-warn: oklch(0.62 0.14 70);
  --ff-row-hover: oklch(0.96 0.012 240);
  --ff-row-cursor: oklch(0.93 0.03 240);
  --ff-row-selected: oklch(0.9 0.05 240);
  --ff-series-1: oklch(0.57 0.105 240);
  --ff-series-2: oklch(0.62 0.13 160);
  --ff-series-3: oklch(0.7 0.14 70);
  --ff-series-4: oklch(0.58 0.15 20);
  --ff-series-5: oklch(0.55 0.12 300);
  --ff-series-6: oklch(0.65 0.1 200);
  --ff-series-7: oklch(0.6 0.13 110);
  --ff-series-8: oklch(0.6 0.08 260);
}

.cladd-color-brand {
  --cladd-theme: #3c8dbc;
}

.dark {
  --ff-brand: oklch(0.42 0.085 240);
  --ff-brand-deep: oklch(0.36 0.075 240);
  --ff-on-brand: oklch(0.97 0.01 240);
  --ff-income: oklch(0.78 0.15 140);
  --ff-expense: oklch(0.76 0.1 35);
  --ff-transfer: oklch(0.76 0.08 220);
  --ff-warn: oklch(0.8 0.13 80);
  --ff-row-hover: oklch(0.25 0.012 240);
  --ff-row-cursor: oklch(0.29 0.03 240);
  --ff-row-selected: oklch(0.33 0.06 240);
  --ff-series-1: oklch(0.7 0.1 240);
  --ff-series-2: oklch(0.72 0.12 160);
  --ff-series-3: oklch(0.8 0.13 75);
  --ff-series-4: oklch(0.7 0.13 25);
  --ff-series-5: oklch(0.7 0.11 300);
  --ff-series-6: oklch(0.75 0.09 200);
  --ff-series-7: oklch(0.75 0.12 115);
  --ff-series-8: oklch(0.72 0.07 260);
}

@theme inline {
  --color-brand: var(--ff-brand);
  --color-brand-deep: var(--ff-brand-deep);
  --color-on-brand: var(--ff-on-brand);
  --color-income: var(--ff-income);
  --color-expense: var(--ff-expense);
  --color-transfer: var(--ff-transfer);
  --color-warn: var(--ff-warn);
  --color-row-hover: var(--ff-row-hover);
  --color-row-cursor: var(--ff-row-cursor);
  --color-row-selected: var(--ff-row-selected);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    scrollbar-color: var(--cladd-fg-softest) transparent;
  }
  body {
    font-size: 13px;
    line-height: 1.45;
    @apply bg-background text-foreground;
  }
  ::selection {
    background: color-mix(in oklch, var(--ff-brand) 28%, transparent);
  }
  :focus-visible {
    outline: 1.5px solid var(--ff-brand);
    outline-offset: 1px;
  }
  .dark :focus-visible {
    outline-color: var(--ff-series-1);
  }
  a {
    text-underline-offset: 3px;
  }
}

@utility num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@utility kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--cladd-fg-soft);
  background: var(--cladd-surface-cut);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 var(--cladd-outline);
}