@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("./fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Victor Mono";
    src: url("./fonts/VictorMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

@theme {
    --color-coral-50: #FFF8F9;
    --color-coral-100: #FEF1F2;
    --color-coral-200: #FDDCDF;
    --color-coral-300: #FBC7CC;
    --color-coral-400: #F99CA6;
    --color-coral-500: #F67280;
    --color-coral-600: #DD6773;
    --color-coral-700: #94444D;
    --color-coral-800: #6F333A;
    --color-coral-900: #4A2226;

    --color-shell-50: #F5F7F9;
    --color-shell-100: #EBEFF2;
    --color-shell-200: #CDD6DF;
    --color-shell-300: #AEBECB;
    --color-shell-400: #728DA4;
    --color-shell-500: #355C7D;
    --color-shell-600: #305371;
    --color-shell-700: #20374B;
    --color-shell-800: #182938;
    --color-shell-900: #101C26;

    --color-lipstick-50: #FCF8F9;
    --color-lipstick-100: #F9F0F3;
    --color-lipstick-200: #EFDAE0;
    --color-lipstick-300: #E6C4CE;
    --color-lipstick-400: #D398A9;
    --color-lipstick-500: #C06C84;
    --color-lipstick-600: #AD6177;
    --color-lipstick-700: #73414F;
    --color-lipstick-800: #56313B;
    --color-lipstick-900: #3A2028;
}

@theme inline {
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);
    --radius-3xl: calc(var(--radius) + 12px);
    --radius-4xl: calc(var(--radius) + 16px);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --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-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --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);
}

:root {
    --radius: 0.625rem;
    --background: oklch(0.97 0.01 240);
    /* shell-50 #F5F7F9 */
    --foreground: oklch(0.17 0.01 240);
    /* shell-900 #101C26 */
    --card: oklch(0.95 0.01 240);
    /* shell-100 #EBEFF2 */
    --card-foreground: oklch(0.17 0.01 240);
    --popover: oklch(0.95 0.01 240);
    /* shell-100 */
    --popover-foreground: oklch(0.17 0.01 240);
    --primary: oklch(0.65 0.18 350);
    /* coral-500 #F67280 */
    --primary-foreground: oklch(0.97 0.01 240);
    --secondary: oklch(0.96 0.02 350);
    /* lipstick-100 #F9F0F3 */
    --secondary-foreground: oklch(0.42 0.12 350);
    /* lipstick-700 #73414F */
    --muted: oklch(0.95 0.01 240);
    /* shell-100 */
    --muted-foreground: oklch(0.45 0.12 230);
    /* shell-500 #355C7D */
    --accent: oklch(0.92 0.04 350);
    /* lipstick-200 #EFDAE0 */
    --accent-foreground: oklch(0.25 0.06 350);
    /* lipstick-800 #56313B */
    --destructive: oklch(0.55 0.15 355);
    /* coral-600 #DD6773 */
    --border: oklch(0.88 0.03 230);
    /* shell-200 #CDD6DF */
    --input: oklch(0.88 0.03 230);
    --ring: oklch(0.72 0.18 350);
    /* coral-400 #F99CA6 */
    --chart-1: oklch(0.65 0.18 350);
    /* coral */
    --chart-2: oklch(0.55 0.15 350);
    /* lipstick */
    --chart-3: oklch(0.45 0.12 230);
    /* shell */
    --chart-4: oklch(0.55 0.12 230);
    /* shell */
    --chart-5: oklch(0.7 0.14 350);
    /* coral */
    --sidebar: oklch(0.95 0.01 240);
    --sidebar-foreground: oklch(0.17 0.01 240);
    --sidebar-primary: oklch(0.65 0.18 350);
    --sidebar-primary-foreground: oklch(0.97 0.01 240);
    --sidebar-accent: oklch(0.92 0.04 350);
    --sidebar-accent-foreground: oklch(0.25 0.06 350);
    --sidebar-border: oklch(0.88 0.03 230);
    --sidebar-ring: oklch(0.72 0.18 350);

    --font-sans: "Atkinson Hyperlegible", sans-serif;
    --font-mono: "Victor Mono", monospace;
}

.dark {
    --background: oklch(0.17 0.01 240);
    /* shell-900 #101C26 */
    --foreground: oklch(0.97 0.01 240);
    /* shell-50 #F5F7F9 */
    --card: oklch(0.22 0.02 240);
    /* shell-800 #182938 */
    --card-foreground: oklch(0.97 0.01 240);
    --popover: oklch(0.22 0.02 240);
    /* shell-800 */
    --popover-foreground: oklch(0.97 0.01 240);
    --primary: oklch(0.72 0.18 350);
    /* coral-400 #F99CA6 */
    --primary-foreground: oklch(0.17 0.01 240);
    --secondary: oklch(0.27 0.03 240);
    /* shell-700 #20374B */
    --secondary-foreground: oklch(0.95 0.01 240);
    --muted: oklch(0.22 0.02 240);
    --muted-foreground: oklch(0.55 0.1 230);
    /* shell-400 #728DA4 */
    --accent: oklch(0.42 0.12 350);
    /* lipstick-700 #73414F */
    --accent-foreground: oklch(0.96 0.02 350);
    /* lipstick-100 */
    --destructive: oklch(0.65 0.18 350);
    /* coral-500 #F67280 */
    --border: oklch(0.27 0.03 240);
    /* shell-700 */
    --input: oklch(0.27 0.03 240);
    --ring: oklch(0.65 0.18 350);
    /* coral-500 */
    --chart-1: oklch(0.72 0.18 350);
    --chart-2: oklch(0.42 0.12 350);
    --chart-3: oklch(0.27 0.03 240);
    --chart-4: oklch(0.55 0.12 230);
    --chart-5: oklch(0.55 0.15 350);
    --sidebar: oklch(0.17 0.01 240);
    --sidebar-foreground: oklch(0.97 0.01 240);
    --sidebar-primary: oklch(0.72 0.18 350);
    --sidebar-primary-foreground: oklch(0.17 0.01 240);
    --sidebar-accent: oklch(0.27 0.03 240);
    --sidebar-accent-foreground: oklch(0.95 0.01 240);
    --sidebar-border: oklch(0.27 0.03 240);
    --sidebar-ring: oklch(0.65 0.18 350);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground;
    }

    a {
        @apply border-b border-coral-500/50;
    }

}