@import url("non.geist");
@import url("non.geist/mono");

@import "tailwindcss";

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

:root {
  --background: oklch(91.28% 0 0);
  --background-2: oklch(95.21% 0 0);
  --background-3: oklch(100% 0 0);
  --foreground: oklch(0% 0 0);
  --popover: oklch(93.05% 0 0);
  --popover-foreground: oklch(0% 0 0);
  --primary: oklch(54% 0.1789 271);
  --primary-foreground: oklch(100% 0 0);
  --secondary: 210 40% 96.1%;
  --secondary-foreground: oklch(0% 0 0);
  --muted: oklch(0% 0 0 / 19.22%);
  --muted-foreground: oklch(49.26% 0 0);
  --accent: oklch(100% 0 0);
  --accent-foreground: oklch(0% 0 0);
  --destructive: oklch(61.34% 0.162 23.58);
  --destructive-foreground: oklch(100% 0 0);
  --warning: oklch(70.43% 0.14390424619548714 87.9634104985311);
  --warning-foreground: oklch(100% 0 0);
  --success: oklch(64.93% 0.107 154.24);
  --success-foreground: oklch(100% 0 0);
  --border: oklch(0% 0 0 / 19.22%);
  --border-dark: oklch(0% 0 0 / 39.22%);
  --input: oklch(0% 0 0 / 6.27%);
  --ring: 221.2 83.2% 53.3%;
  --radius: 8px;
  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

.dark,
:root[class~="dark"] {
  --background: oklch(21.34% 0 0);
  --background-2: oklch(25.2% 0 0);
  --background-3: oklch(28.5% 0 0);
  --foreground: oklch(92.8% 0 0);
  --popover: oklch(28.5% 0 0);
  --popover-foreground: oklch(92.8% 0 0);
  --primary: oklch(54% 0.1789 271);
  --primary-foreground: oklch(92.8% 0 0);
  --secondary: 210 40% 96.1%;
  --secondary-foreground: oklch(92.8% 0 0);
  --muted: oklch(100% 0 0 / 13.33%);
  --muted-foreground: oklch(76.99% 0 0);
  --accent: oklch(95.81% 0 0);
  --accent-foreground: oklch(0% 0 0);
  --warning: oklch(70.43% 0.14390424619548714 87.9634104985311);
  --warning-foreground: oklch(100% 0 0);
  --destructive: oklch(61.34% 0.162 23.58);
  --destructive-foreground: oklch(100% 0 0);
  --success: oklch(64.93% 0.107 154.24);
  --success-foreground: oklch(100% 0 0);
  --border: oklch(100% 0 0 / 13.33%);
  --border-dark: oklch(100% 0 0 / 39.33%);
  --input: oklch(100% 0 0 / 10.59%);
  --ring: 221.2 83.2% 53.3%;
}

:root {
  --gray-50: #f9f9f9;
  --gray-100: #efefef;
  --gray-200: #e8e8e8;
  --gray-300: #e0e0e0;
  --gray-400: #cecece;
  --gray-500: #d8d8d8;
  --gray-600: #bbbbbb;
  --gray-700: #8d8d8d;
  --gray-800: #838383;
  --gray-900: #646464;
  --gray-950: #202020;

  --grayAlpha-50: 0% 0 0 / 2.35%;
  --grayAlpha-100: 0% 0 0 / 6.27%;
  --grayAlpha-200: 0% 0 0 / 9.02%;
  --grayAlpha-300: 0% 0 0 / 12.16%;
  --grayAlpha-400: 0% 0 0 / 15.29%;
  --grayAlpha-500: 0% 0 0 / 19.22%;
  --grayAlpha-600: 0% 0 0 / 26.67%;
  --grayAlpha-700: 0% 0 0 / 44.71%;
  --grayAlpha-800: 0% 0 0 / 48.63%;
  --grayAlpha-900: 0% 0 0 / 60.78%;
  --grayAlpha-950: 0% 0 0 / 87.45%;

  /* Colors for different status */
  --status-pill-0: #d94b0e26;
  --status-icon-0: #d94b0e;

  --status-pill-1: #9f3def26;
  --status-icon-1: #9f3def;

  --status-pill-2: #8e862c26;
  --status-icon-2: #8e862c;

  --status-pill-3: #5c5c5c26;
  --status-icon-3: #5c5c5c;

  --status-pill-4: #c28c1126;
  --status-icon-4: #c28c11;

  --status-pill-5: #3f8ef726;
  --status-icon-5: #3f8ef7;

  --status-pill-6: #3caf2026;
  --status-icon-6: #3caf20;

  /* Avatar colors */
  --custom-color-1: #b56455;
  --custom-color-2: #7b8a34;
  --custom-color-3: #1c91a8;
  --custom-color-4: #886dbc;
  --custom-color-5: #ad6e30;
  --custom-color-6: #54935b;
  --custom-color-7: #4187c0;
  --custom-color-8: #a165a1;
  --custom-color-9: #997d1d;
  --custom-color-10: #2b9684;
  --custom-color-11: #2b9684;
  --custom-color-12: #b0617c;

  /* Team Colors */
  --team-color-1: #89c794;
  --team-color-2: #d2a1bb;
  --team-color-3: #90c5d6;
}

.dark {
  --gray-50: #191919;
  --gray-100: #222222;
  --gray-200: #2a2a2a;
  --gray-300: #313131;
  --gray-400: #3a3a3a;
  --gray-500: #484848;
  --gray-600: #606060;
  --gray-700: #6e6e6e;
  --gray-800: #7b7b7b;
  --gray-900: #b4b4b4;
  --gray-950: #eeeeee;

  --grayAlpha-50: 100% 0 0 / 3.53%;
  --grayAlpha-100: 100% 0 0 / 7.06%;
  --grayAlpha-200: 100% 0 0 / 10.59%;
  --grayAlpha-300: 100% 0 0 / 13.33%;
  --grayAlpha-400: 100% 0 0 / 17.25%;
  --grayAlpha-500: 100% 0 0 / 23.14%;
  --grayAlpha-600: 100% 0 0 / 33.33%;
  --grayAlpha-700: 100% 0 0 / 39.22%;
  --grayAlpha-800: 100% 0 0 / 44.31%;
  --grayAlpha-900: 100% 0 0 / 68.63%;
  --grayAlpha-950: 100% 0 0 / 92.94%;

  /* Colors for different status */
  --status-pill-0: #c06142;
  --status-icon-0: #c06142;

  --status-pill-1: #886dbc;
  --status-icon-1: #886dbc;

  --status-pill-2: #83872c;
  --status-icon-2: #83872c;

  --status-pill-3: #b4b4b4;
  --status-icon-3: #5c5c5c;

  --status-pill-4: #c28c11;
  --status-icon-4: #c28c11;

  --status-pill-5: #4187c0;
  --status-icon-5: #4187c0;

  --status-pill-6: #5d9151;
  --status-icon-6: #5d9151;

  /* Team Colors */
  --team-color-1: #54935b;
  --team-color-2: #a165a1;
  --team-color-3: #4187c0;
  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-border: var(--border);
  --color-border-dark: var(--border-dark);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-background-2: var(--background-2);
  --color-background-3: var(--background-3);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --color-gray-50: var(--gray-50);
  --color-gray-100: var(--gray-100);
  --color-gray-200: var(--gray-200);
  --color-gray-300: var(--gray-300);
  --color-gray-400: var(--gray-400);
  --color-gray-500: var(--gray-500);
  --color-gray-600: var(--gray-600);
  --color-gray-700: var(--gray-700);
  --color-gray-800: var(--gray-800);
  --color-gray-900: var(--gray-900);
  --color-gray-950: var(--gray-950);

  --color-grayAlpha-50: oklch(var(--grayAlpha-50));
  --color-grayAlpha-100: oklch(var(--grayAlpha-100));
  --color-grayAlpha-200: oklch(var(--grayAlpha-200));
  --color-grayAlpha-300: oklch(var(--grayAlpha-300));
  --color-grayAlpha-400: oklch(var(--grayAlpha-400));
  --color-grayAlpha-500: oklch(var(--grayAlpha-500));
  --color-grayAlpha-600: oklch(var(--grayAlpha-600));
  --color-grayAlpha-700: oklch(var(--grayAlpha-700));
  --color-grayAlpha-800: oklch(var(--grayAlpha-800));
  --color-grayAlpha-900: oklch(var(--grayAlpha-900));
  --color-grayAlpha-950: oklch(var(--grayAlpha-950));

  --color-red-50: #fdf3f3;
  --color-red-100: #fbe9e8;
  --color-red-200: #f7d4d4;
  --color-red-300: #f0b1b1;
  --color-red-400: #e78587;
  --color-red-500: #d75056;
  --color-red-600: #c43a46;
  --color-red-700: #a52b3a;
  --color-red-800: #8a2735;
  --color-red-900: #772433;
  --color-red-950: #420f18;

  --color-orange-50: #fdf6ef;
  --color-orange-100: #fbead9;
  --color-orange-200: #f7d2b1;
  --color-orange-300: #f1b480;
  --color-orange-400: #ea8c4d;
  --color-orange-500: #e67333;
  --color-orange-600: #d65520;
  --color-orange-700: #b2401c;
  --color-orange-800: #8e341e;
  --color-orange-900: #732d1b;
  --color-orange-950: #3e140c;

  --color-yellow-50: #fdfbe9;
  --color-yellow-100: #faf7c7;
  --color-yellow-200: #f7ec91;
  --color-yellow-300: #f1db53;
  --color-yellow-400: #ebc724;
  --color-yellow-500: #dcb016;
  --color-yellow-600: #c28c11;
  --color-yellow-700: #976211;
  --color-yellow-800: #7d4f16;
  --color-yellow-900: #6b4118;
  --color-yellow-950: #3e220a;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 26px;

  --radius-none: 0px;
  --radius: 0.375rem;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-5xl: 3rem;
  --radius-full: 9999px;

  --shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  --shadow-1: 0px 6px 20px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);

  --font-sans: "Geist Variable", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-mono: "Geist Mono Variable", monaco, Consolas, "Lucida Console", monospace;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground text-base;
  }
}