:root {
  /* Light Theme - Wine-berry tinted blacks with purple accents */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0.015 343.46); /* black with wine-berry tint */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0.015 343.46);
  /* Plate behind content thumbnails. Uploaded logos are commonly dark ink on
     transparency, so this surface stays light in both themes. */
  --thumbnail: oklch(0.97 0.005 343.46);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0.015 343.46);

  /* Primary - tinted black for buttons */
  --primary: oklch(0.205 0.025 343.46); /* wine-berry tinted black */
  --primary-foreground: oklch(0.985 0 0);

  --secondary: oklch(0.97 0.005 343.46); /* whisper of wine-berry */
  --secondary-foreground: oklch(0.205 0.025 343.46);

  --muted: oklch(0.97 0.005 343.46);
  --muted-foreground: oklch(0.5 0.02 343.46); /* tinted gray */

  --accent: oklch(0.97 0.005 343.46);
  --accent-foreground: oklch(0.205 0.025 343.46);

  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);

  --border: oklch(0.9 0.008 343.46); /* subtle tinted border */
  --input: oklch(0.9 0.008 343.46);

  /* Ring - landing page magenta for focus states */
  --ring: oklch(0.5441 0.1579 320);

  /* Tag accents. Distinct hues, unlike the monochromatic chart ramp. Lightness is tuned per
     theme so the same token is legible as text and as a 15% tint behind it. */
  --label-1: oklch(0.48 0.15 255); /* blue */
  --label-2: oklch(0.48 0.13 160); /* green */
  --label-3: oklch(0.48 0.13 75); /* amber */
  --label-4: oklch(0.48 0.18 10); /* red */
  --label-5: oklch(0.48 0.16 305); /* violet */
  --label-6: oklch(0.48 0.11 200); /* teal */

  /* Charts using purple/wine-berry palette */
  --chart-1: oklch(0.75 0.08 300); /* light purple */
  --chart-2: oklch(0.6 0.12 310); /* mid purple */
  --chart-3: oklch(0.5 0.15 320); /* rich purple */
  --chart-4: oklch(0.4 0.12 330); /* wine-ish */
  --chart-5: oklch(0.28 0.08 330); /* dark purple */

  /* Sidebar - wine-berry tinted monochromatic */
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.145 0.015 343.46);
  --sidebar-primary: oklch(0.205 0.025 343.46); /* tinted black for active */
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0.005 343.46);
  --sidebar-accent-foreground: oklch(0.205 0.025 343.46);
  --sidebar-border: oklch(0.9 0.008 343.46);
  --sidebar-ring: oklch(0.4 0.12 343.46);

  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0rem;
  --shadow-2xs: 0 1px 2px 0px hsl(0 0% 0% / 0.01);
  --shadow-xs: 0 1px 2px 0px hsl(0 0% 0% / 0.01);
  --shadow-sm: 0 1px 2px 0px hsl(0 0% 0% / 0.02), 0 1px 2px -1px hsl(0 0% 0% / 0.02);
  --shadow: 0 1px 2px 0px hsl(0 0% 0% / 0.02), 0 1px 2px -1px hsl(0 0% 0% / 0.02);
  --shadow-md: 0 1px 2px 0px hsl(0 0% 0% / 0.02), 0 2px 4px -1px hsl(0 0% 0% / 0.02);
  --shadow-lg: 0 1px 2px 0px hsl(0 0% 0% / 0.02), 0 4px 6px -1px hsl(0 0% 0% / 0.02);
  --shadow-xl: 0 1px 2px 0px hsl(0 0% 0% / 0.02), 0 8px 10px -1px hsl(0 0% 0% / 0.02);
  --shadow-2xl: 0 1px 2px 0px hsl(0 0% 0% / 0.05);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  /* Dark Theme - Revolver-tinted blacks with fog/purple accents */
  --background: oklch(0.1448 0.015 330.91); /* tinted black */
  --foreground: oklch(0.9851 0 0);
  --card: oklch(0.2046 0.012 330.91); /* tinted dark gray */
  --card-foreground: oklch(0.9851 0 0);
  --thumbnail: oklch(0.9251 0.004 330.91);
  --popover: oklch(0.2686 0.01 330.91); /* tinted medium-dark */
  --popover-foreground: oklch(0.9851 0 0);
  --primary: oklch(0.8561 0.0681 301.14); /* fog */
  --primary-foreground: oklch(0.1448 0.015 330.91);
  --secondary: oklch(0.2686 0.01 330.91);
  --secondary-foreground: oklch(0.9851 0 0);
  --muted: oklch(0.2686 0.01 330.91);
  --muted-foreground: oklch(0.709 0 0);
  --accent: oklch(0.3715 0.02 330.91);
  --accent-foreground: oklch(0.9851 0 0);
  --destructive: oklch(0.7022 0.1892 22.2279);
  --destructive-foreground: oklch(0.9851 0 0);
  --border: oklch(0.2768 0.012 330.91); /* tinted border */
  --input: oklch(0.325 0.01 330.91);
  --ring: oklch(0.8561 0.0681 301.14); /* fog */

  /* Charts */
  --label-1: oklch(0.8 0.13 255);
  --label-2: oklch(0.8 0.12 160);
  --label-3: oklch(0.8 0.12 75);
  --label-4: oklch(0.8 0.13 10);
  --label-5: oklch(0.8 0.13 305);
  --label-6: oklch(0.8 0.1 200);

  --chart-1: oklch(0.8561 0.0681 301.14); /* fog */
  --chart-2: oklch(0.7 0.08 305); /* mid fog */
  --chart-3: oklch(0.55 0.1 320); /* purple */
  --chart-4: oklch(0.45 0.0815 343.46); /* wine berry */
  --chart-5: oklch(0.35 0.06 330.91); /* revolver */

  /* Sidebar */
  --sidebar: oklch(0.2046 0.012 330.91);
  --sidebar-foreground: oklch(0.9851 0 0);
  --sidebar-primary: oklch(0.8561 0.0681 301.14); /* fog */
  --sidebar-primary-foreground: oklch(0.1448 0.015 330.91);
  --sidebar-accent: oklch(0.3715 0.02 330.91);
  --sidebar-accent-foreground: oklch(0.9851 0 0);
  --sidebar-border: oklch(0.2768 0.012 330.91);
  --sidebar-ring: oklch(0.5418 0.0731 274.3); /* waikawa gray */

  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius: 0rem;
  --shadow-2xs: 0 1px 2px 0px hsl(0 0% 0% / 0.1);
  --shadow-xs: 0 1px 2px 0px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 2px 0px hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.2);
  --shadow: 0 1px 2px 0px hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.2);
  --shadow-md: 0 1px 2px 0px hsl(0 0% 0% / 0.2), 0 2px 4px -1px hsl(0 0% 0% / 0.2);
  --shadow-lg: 0 1px 2px 0px hsl(0 0% 0% / 0.2), 0 4px 6px -1px hsl(0 0% 0% / 0.2);
  --shadow-xl: 0 1px 2px 0px hsl(0 0% 0% / 0.2), 0 8px 10px -1px hsl(0 0% 0% / 0.2);
  --shadow-2xl: 0 1px 2px 0px hsl(0 0% 0% / 0.5);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-thumbnail: var(--thumbnail);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-label-1: var(--label-1);
  --color-label-2: var(--label-2);
  --color-label-3: var(--label-3);
  --color-label-4: var(--label-4);
  --color-label-5: var(--label-5);
  --color-label-6: var(--label-6);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius));
  --radius-md: calc(var(--radius));
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius));

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
}

body {
  letter-spacing: var(--tracking-normal);
}

/* Prevent descenders (g, y, p, q, j) from being clipped in card titles
   when combined with the truncate class. Override here instead of
   basecoat.css so upstream updates don't clobber the fix. */
.card > header h2 {
  line-height: calc(1.25 * 1em);
}