@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {

--color-brand-accent: hsl(207 77% 45%);
--color-brand-accent-foreground: hsl(0 0% 100%);
--color-brand-bg-color: hsl(202 97% 12%);

--color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%);

--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(222.2 84% 4.9%);

--color-popover: hsl(0 0% 100%);
--color-popover-foreground: hsl(222.2 84% 4.9%);

--color-primary: hsl(207 77% 45%);
--color-primary-foreground: hsl(0 0% 100%);

--color-secondary: hsl(210 40% 96%);
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);

--color-muted: hsl(210 40% 96%);
--color-muted-foreground: hsl(215.4 16.3% 46.9%);

--color-accent: hsl(210 40% 96%);
--color-accent-foreground: hsl(222.2 47.4% 11.2%);

--color-success: hsl(161 93.5% 30.4%);
--color-success-foreground: hsl(0 0% 100%);

--color-warning: hsl(42 100% 50%);
--color-warning-foreground: hsl(20 100% 25%);

--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(210 40% 98%);

--color-border: hsl(214.3 31.8% 91.4%);
--color-input: hsl(214.3 31.8% 91.4%);

--color-ring: hsl(207 77% 45%);

--radius: 0.5rem;

--color-chart-1: hsl(12 76% 61%);
--color-chart-2: hsl(173 58% 39%);
--color-chart-3: hsl(197 37% 24%);
--color-chart-4: hsl(43 74% 66%);
--color-chart-5: hsl(27 87% 67%);

--color-sidebar-background: hsl(0 0% 98%);
--color-sidebar-foreground: hsl(240 5.3% 26.1%);
--color-sidebar-primary: hsl(240 5.9% 10%);
--color-sidebar-primary-foreground: hsl(0 0% 98%);
--color-sidebar-accent: hsl(240 4.8% 95.9%);
--color-sidebar-accent-foreground: hsl(240 5.9% 10%);
--color-sidebar-border: hsl(220 13% 91%);
--color-sidebar-ring: hsl(207 77% 45%);
}

.dark,
[data-theme='dark'] {
--color-background: hsl(222.2 84% 4.9%);
--color-foreground: hsl(210 40% 98%);
--color-brand-bg-color: hsl(202 97% 12%);

--color-card: hsl(222.2 84% 4.9%);
--color-card-foreground: hsl(210 40% 98%);

--color-popover: hsl(222.2 84% 4.9%);
--color-popover-foreground: hsl(210 40% 98%);

--color-primary: hsl(207 77% 45%);
--color-primary-foreground: hsl(0 0% 100%);

--color-secondary: hsl(217.2 32.6% 17.5%);
--color-secondary-foreground: hsl(210 40% 98%);

--color-muted: hsl(217.2 32.6% 17.5%);
--color-muted-foreground: hsl(215 20.2% 65.1%);

--color-accent: hsl(217.2 32.6% 17.5%);
--color-accent-foreground: hsl(210 40% 98%);

--color-success: hsl(161 93.5% 30.4%);
--color-success-foreground: hsl(0 0% 100%);

--color-warning: hsl(42 100% 50%);
--color-warning-foreground: hsl(20 100% 25%);

--color-destructive: hsl(0 62.8% 30.6%);
--color-destructive-foreground: hsl(210 40% 98%);

--color-border: hsl(217.2 32.6% 17.5%);
--color-input: hsl(217.2 32.6% 17.5%);

--color-ring: hsl(207 77% 45%);

--color-chart-1: hsl(220 70% 50%);
--color-chart-2: hsl(160 60% 45%);
--color-chart-3: hsl(30 80% 55%);
--color-chart-4: hsl(280 65% 60%);
--color-chart-5: hsl(340 75% 55%);

--color-sidebar-background: hsl(240 5.9% 10%);
--color-sidebar-foreground: hsl(240 4.8% 95.9%);
--color-sidebar-primary: hsl(224.3 76.3% 48%);
--color-sidebar-primary-foreground: hsl(0 0% 100%);
--color-sidebar-accent: hsl(240 3.7% 15.9%);
--color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
--color-sidebar-border: hsl(240 3.7% 15.9%);
--color-sidebar-ring: hsl(207 77% 45%);
}}
@layer base {* {@apply border-border outline-ring/50 ring-offset-background;}
body {@apply bg-background text-foreground;}}
.int-card {@apply rounded-md border border-border bg-card;}
.link-stretch::after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;content: '';}