:root {
  --radius: 0.65rem;
  --background: oklch(1 0 0);
  --foreground: #1e2233;
  --card: oklch(1 0 0);
  --card-foreground: #1e2233;
  --popover: oklch(1 0 0);
  --popover-foreground: #1e2233;
  --primary: #49CC79;
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(95.098% 0.00673 146.271 / 0.973);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: #f5f4f0;
  --muted-foreground: #8a8f9e;
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: #f71949;
  --destructive-soft: var(--destructive);
  --border: #e4e3dc;
  --input: #e4e3dc;
  --ring: oklch(0.723 0.219 149.579);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.723 0.219 149.579);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.723 0.219 149.579);
  --highlight: oklch(0.809 0.105 251.813);

  /* Custom colors */
  --destructive-foreground: oklch(0.985 0 0);
  --success: #38c977;
  --success-foreground: oklch(0.985 0 0);
  --warning: oklch(0.769 0.16 70);
  --warning-foreground: oklch(0.21 0.006 285.9);
  --info: oklch(0.546 0.215 262.9);
  --info-foreground: oklch(0.985 0 0);

  /* New-design surfaces and accents */
  --surface-tint: #fbfaf7;
  --surface-sunken: #eceae4;
  --surface-sunken-deep: #e4e1d8; /* Thumbnail panel, a shade off the viewer */
  --border-soft: #ecebe4;
  --divider: #f0efe9;
  --foreground-secondary: #5b6478;
  --muted-foreground-soft: #a6a59c;
  --primary-bright: #2ed47a;
  --brand-violet: #7b40ff;
  --brand-violet-light: #9b6bff;
  --brand-magenta: #e83aae;

  /* Panel surface (temporary loud red placeholder, to be tuned) */
  --panel: #fcfaf7;
  --panel-secondary: #f5f4f0;

  /* Active tab pill (only read in dark mode; light uses --background) */
  --tab-active: oklch(1 0 0);

  /* Floating-surface shadow (popovers, menus, overlay cards) */
  --overlay-shadow: 0 16px 40px rgba(30, 34, 51, 0.16);

  /* Gradients */
  --gradient-primary: linear-gradient(90deg, #1fa85a, #2ed47a);
  --gradient-brand: linear-gradient(90deg, #e83aae, #7b4dff, #3928b8);
  --gradient-badge: linear-gradient(150deg, #8a5cff, #6b34d6);
  --gradient-hero: radial-gradient(120% 90% at 30% 0%, #1a2140, #0b1228 75%);
  --gradient-destructive: linear-gradient(
    90deg,
    var(--destructive),
    color-mix(in oklab, var(--destructive) 88%, white)
  );
  --gradient-destructive-strip: linear-gradient(
    90deg,
    color-mix(in oklab, var(--destructive) 60%, white),
    var(--destructive)
  );
}

.dark {
  --background: #131830;
  --foreground: oklch(0.985 0 0);
  --card: #212944;
  --card-foreground: oklch(0.985 0 0);
  --popover: #1e243c;
  --popover-foreground: oklch(0.985 0 0);
  --primary: #1fa85a;
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: #1f243b;
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: #db1742;
  --destructive-soft: color-mix(in oklab, var(--destructive) 62%, white);
  --border: #25293E;
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.527 0.154 150.069);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: #14182E;
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.723 0.219 149.579);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.723 0.219 149.579);
  --highlight: oklch(0.809 0.105 251.813);
  /* Custom colors */
  --destructive-foreground: oklch(0.985 0 0);
  --success: oklch(0.723 0.19 149.6);
  --success-foreground: oklch(0.21 0.006 285.9);
  --warning: oklch(0.828 0.19 84.4);
  --warning-foreground: oklch(0.21 0.006 285.9);
  --info: oklch(0.707 0.165 254.6);
  --info-foreground: oklch(0.21 0.006 285.9);

  /* New-design surfaces and accents. */
  --surface-tint: #1B2036;
  --surface-sunken: #0A0E1C; /* Document viewer background */
  --surface-sunken-deep: #10152A; /* Thumbnail panel, a shade off the viewer */
  --border-soft: #333952;
  --divider: #1F253B;
  --foreground-secondary: #a9afc6;
  --muted-foreground-soft: #8b90a8;
  --primary-bright: #2ed47a;
  --brand-violet: #7832EC;
  --brand-violet-light: #9b6bff;
  --brand-magenta: #e83aae;

  /* Panel surface */
  --panel: #14192F;
  --panel-secondary: #0E1224;

  /* Active tab pill: lighter navy against the dark tab strip */
  --tab-active: #2A3153;

  /* Floating-surface shadow (popovers, menus, overlay cards) */
  --overlay-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);

  /* Gradients */
  --gradient-primary: linear-gradient(90deg, #1fa85a, #2ed47a);
  --gradient-brand: linear-gradient(90deg, #e83aae, #7b4dff, #3928b8);
  --gradient-badge: linear-gradient(150deg, #8a5cff, #6b34d6);
  --gradient-hero: radial-gradient(120% 90% at 30% 0%, #1a2140, #0b1228 75%);
  --gradient-destructive: linear-gradient(
    90deg,
    var(--destructive),
    color-mix(in oklab, var(--destructive) 88%, white)
  );
  --gradient-destructive-strip: linear-gradient(
    90deg,
    color-mix(in oklab, var(--destructive) 60%, white),
    var(--destructive)
  );
}

/*
 * App sidebar skin: deep navy in BOTH light and dark mode.
 */
[data-slot="sidebar"] {
  --sidebar: #0B0F23;
  --sidebar-foreground: oklch(0.985 0 0);
  /* Hover accent: a lighter shade of the sidebar navy. */
  --sidebar-accent: #1d2448;
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 12%);

  --foreground: oklch(0.985 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --accent: #1d2448;
  --accent-foreground: oklch(0.985 0 0);
  --muted: #1d2448;
  --muted-foreground: oklch(0.68 0.02 275);
  --border: oklch(1 0 0 / 12%);
}