@import "tailwindcss";

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

:root {
  --default-font-family: "DM Sans", ui-sans-serif, sans-serif;
  --font-dm-mono: "DM Mono", ui-monospace, monospace;

  line-height: 1.5;
  font-size: 16px;

  color-scheme: light dark;
  font-family:
    var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    ), serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  font-optical-sizing: auto;

  /* Font Weight */
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* Base Color Palette */
  --accent-1000: #2862fe;
  --accent-970: #2862fef7;
  --accent-950: #2862fef2;
  --accent-900: #2862fee5;
  --accent-800: #2862fecc;
  --accent-700: #2862feb2;
  --accent-600: #2862fe99;
  --accent-500: #2862fe80;
  --accent-400: #2862fe66;
  --accent-300: #2862fe4d;
  --accent-200: #2862fe33;
  --accent-100: #2862fe1a;
  --accent-50: #2862fe0d;
  --accent-30: #2862fe08;

  --dark-1000: #0a0a0a;
  --dark-970: #0a0a0af7;
  --dark-950: #0a0a0af2;
  --dark-900: #0a0a0ae5;
  --dark-800: #0a0a0acc;
  --dark-700: #0a0a0ab2;
  --dark-600: #0a0a0a99;
  --dark-500: #0a0a0a80;
  --dark-400: #0a0a0a66;
  --dark-300: #0a0a0a4d;
  --dark-200: #0a0a0a33;
  --dark-100: #0a0a0a1a;
  --dark-50: #0a0a0a0d;
  --dark-30: #0a0a0a08;

  --light-1000: #ffffff;
  --light-970: #fffffff7;
  --light-950: #fffffff2;
  --light-900: #ffffffe5;
  --light-800: #ffffffcc;
  --light-700: #ffffffb2;
  --light-600: #ffffff99;
  --light-500: #ffffff80;
  --light-400: #ffffff66;
  --light-300: #ffffff4d;
  --light-200: #ffffff33;
  --light-100: #ffffff1a;
  --light-50: #ffffff0d;
  --light-30: #ffffff08;

  --error: #d61355;

  --canvas-background: #ebebeb;

  /* Light Theme Semantic Tokens */
  --background: var(--light-1000);
  --foreground: var(--dark-1000);

  --surface-content: var(--dark-30);
  --surface-component: var(--dark-50);
  --surface-light-100: var(--dark-100);
  --surface-light-200: var(--dark-200);

  --border: var(--dark-100);
  --border-accent: var(--accent-1000);

  --states-hover: var(--dark-30);
  --states-selected: var(--dark-100);
  --states-active: var(--accent-1000);

  --text-header: var(--dark-1000);
  --text-body: var(--dark-600);
  --text-placeholder: var(--dark-400);
  --text-accent: var(--accent-1000);
  --text-error: var(--error);

  --icon-active: var(--dark-1000);
  --icon-light: var(--dark-600);
  --icon-component: var(--dark-400);
  --icon-accent: var(--accent-1000);

  /* Component Tokens */
  --primary: var(--accent-1000);
  --primary-foreground: var(--light-1000);

  --secondary: var(--surface-component);
  --secondary-foreground: var(--text-body);

  --muted: var(--surface-light-100);
  --muted-foreground: var(--text-body);

  --accent: var(--accent-1000);
  --accent-foreground: var(--light-1000);

  --destructive: var(--error);
  --destructive-foreground: var(--light-1000);

  --card: var(--surface-content);
  --card-foreground: var(--foreground);

  --popover: var(--surface-content);
  --popover-foreground: var(--foreground);

  --input: var(--states-hover);
  --ring: var(--border-accent);

  /* Chart colors */
  --chart-1: var(--accent-1000);
  --chart-2: var(--accent-800);
  --chart-3: var(--accent-600);
  --chart-4: var(--accent-400);
  --chart-5: var(--accent-200);

  /* Header tokens */
  --header: var(--background);
  --header-foreground: var(--text-header);
  --header-primary: var(--primary);
  --header-primary-foreground: var(--primary-foreground);
  --header-accent: var(--surface-component);
  --header-accent-foreground: var(--text-body);
  --header-border: var(--border);
  --header-ring: var(--ring);

  /* Sidebar tokens */
  --sidebar: var(--background);
  --sidebar-foreground: var(--text-header);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--surface-component);
  --sidebar-accent-foreground: var(--text-body);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}

.dark {
  --canvas-background: #030303;

  /* Dark Theme Semantic Tokens */
  --background: var(--dark-1000);
  --foreground: var(--light-1000);

  --surface-content: var(--light-30);
  --surface-component: var(--light-50);
  --surface-light-100: var(--light-100);
  --surface-light-200: var(--light-200);

  --border: var(--light-100);

  --states-hover: var(--light-30);
  --states-selected: var(--light-100);

  --text-header: var(--light-1000);
  --text-body: var(--light-600);
  --text-placeholder: var(--light-400);

  --icon-active: var(--light-1000);
  --icon-light: var(--light-600);
  --icon-component: var(--light-400);

  --secondary-foreground: var(--light-600);
  --muted-foreground: var(--light-600);

  --card: var(--surface-content);
  --card-foreground: var(--foreground);

  --popover: var(--surface-content);
  --popover-foreground: var(--foreground);

  --input: var(--states-hover);
  --ring: var(--border-accent);

  --chart-1: var(--accent-1000);
  --chart-2: var(--accent-800);
  --chart-3: var(--accent-600);
  --chart-4: var(--accent-400);
  --chart-5: var(--accent-200);

  /* Header tokens */
  --header: var(--background);
  --header-foreground: var(--text-header);
  --header-primary: var(--primary);
  --header-primary-foreground: var(--primary-foreground);
  --header-accent: var(--surface-component);
  --header-accent-foreground: var(--text-body);
  --header-border: var(--border);
  --header-ring: var(--ring);

  /* Sidebar tokens */
  --sidebar: var(--background);
  --sidebar-foreground: var(--text-header);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--surface-component);
  --sidebar-accent-foreground: var(--text-body);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}

@theme inline {
  /* Expose CSS variables to Tailwind */
  --font-weight-500: var(--font-weight-500);
  --font-weight-600: var(--font-weight-600);
  --font-weight-700: var(--font-weight-700);

  /* Expose color palette */
  --color-accent-1000: var(--accent-1000);
  --color-accent-970: var(--accent-970);
  --color-accent-950: var(--accent-950);
  --color-accent-900: var(--accent-900);
  --color-accent-800: var(--accent-800);
  --color-accent-700: var(--accent-700);
  --color-accent-600: var(--accent-600);
  --color-accent-500: var(--accent-500);
  --color-accent-400: var(--accent-400);
  --color-accent-300: var(--accent-300);
  --color-accent-200: var(--accent-200);
  --color-accent-100: var(--accent-100);
  --color-accent-50: var(--accent-50);
  --color-accent-30: var(--accent-30);

  --color-dark-1000: var(--dark-1000);
  --color-dark-970: var(--dark-970);
  --color-dark-950: var(--dark-950);
  --color-dark-900: var(--dark-900);
  --color-dark-800: var(--dark-800);
  --color-dark-700: var(--dark-700);
  --color-dark-600: var(--dark-600);
  --color-dark-500: var(--dark-500);
  --color-dark-400: var(--dark-400);
  --color-dark-300: var(--dark-300);
  --color-dark-200: var(--dark-200);
  --color-dark-100: var(--dark-100);
  --color-dark-50: var(--dark-50);
  --color-dark-30: var(--dark-30);

  --color-light-1000: var(--light-1000);
  --color-light-970: var(--light-970);
  --color-light-950: var(--light-950);
  --color-light-900: var(--light-900);
  --color-light-800: var(--light-800);
  --color-light-700: var(--light-700);
  --color-light-600: var(--light-600);
  --color-light-500: var(--light-500);
  --color-light-400: var(--light-400);
  --color-light-300: var(--light-300);
  --color-light-200: var(--light-200);
  --color-light-100: var(--light-100);
  --color-light-50: var(--light-50);
  --color-light-30: var(--light-30);

  --color-error: var(--error);

  /* Expose semantic tokens */
  --color-canvas-background: var(--canvas-background);
  --color-background: var(--background);
  --color-foreground: var(--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-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --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-header: var(--header);
  --color-header-foreground: var(--header-foreground);
  --color-header-primary: var(--header-primary);
  --color-header-primary-foreground: var(--header-primary-foreground);
  --color-header-accent: var(--header-accent);
  --color-header-accent-foreground: var(--header-accent-foreground);
  --color-header-border: var(--header-border);
  --color-header-ring: var(--header-ring);

  --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);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}