@import "tailwindcss";

@import "tw-animate-css";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

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

@theme inline {
    --font-sans:
        Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-headline-lg:
        Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-headline-lg-mobile:
        Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-headline-md:
        Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-body-md:
        Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-body-sm:
        Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-label-uppercase:
        Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";

    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    --spacing-container-margin: 1.5rem;
    --spacing-column-gap: 1rem;
    --spacing-card-padding: 0.75rem;
    --spacing-stack-gap-sm: 0.5rem;
    --spacing-stack-gap-md: 0.75rem;

    --text-headline-lg: 1.5rem;
    --text-headline-lg--line-height: 2rem;
    --text-headline-lg--font-weight: 600;
    --text-headline-lg--letter-spacing: 0;
    --text-headline-md: 1.125rem;
    --text-headline-md--line-height: 1.5rem;
    --text-headline-md--font-weight: 600;
    --text-headline-md--letter-spacing: 0;
    --text-headline-lg-mobile: 1.25rem;
    --text-headline-lg-mobile--line-height: 1.75rem;
    --text-headline-lg-mobile--font-weight: 600;
    --text-body-md: 0.875rem;
    --text-body-md--line-height: 1.25rem;
    --text-body-md--font-weight: 400;
    --text-body-sm: 0.8125rem;
    --text-body-sm--line-height: 1.125rem;
    --text-body-sm--font-weight: 400;
    --text-label-uppercase: 0.6875rem;
    --text-label-uppercase--line-height: 1rem;
    --text-label-uppercase--font-weight: 700;
    --text-label-uppercase--letter-spacing: 0.05em;

    --shadow-kanban-card: 0 4px 12px rgb(0 0 0 / 0.08);
    --shadow-kanban-nav: 0 12px 30px rgb(15 23 42 / 0.06);

    --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-destructive-foreground: var(--destructive-foreground);

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

    --color-surface: var(--surface);
    --color-surface-dim: var(--surface-dim);
    --color-surface-bright: var(--surface-bright);
    --color-surface-container-lowest: var(--surface-container-lowest);
    --color-surface-container-low: var(--surface-container-low);
    --color-surface-container: var(--surface-container);
    --color-surface-container-high: var(--surface-container-high);
    --color-surface-container-highest: var(--surface-container-highest);
    --color-surface-variant: var(--surface-variant);
    --color-surface-tint: var(--surface-tint);
    --color-on-surface: var(--on-surface);
    --color-on-surface-variant: var(--on-surface-variant);
    --color-on-background: var(--on-background);
    --color-outline: var(--outline);
    --color-outline-variant: var(--outline-variant);
    --color-primary-container: var(--primary-container);
    --color-on-primary: var(--on-primary);
    --color-on-primary-container: var(--on-primary-container);
    --color-primary-fixed: var(--primary-fixed);
    --color-primary-fixed-dim: var(--primary-fixed-dim);
    --color-on-primary-fixed: var(--on-primary-fixed);
    --color-on-primary-fixed-variant: var(--on-primary-fixed-variant);
    --color-secondary-container: var(--secondary-container);
    --color-on-secondary: var(--on-secondary);
    --color-on-secondary-container: var(--on-secondary-container);
    --color-secondary-fixed: var(--secondary-fixed);
    --color-secondary-fixed-dim: var(--secondary-fixed-dim);
    --color-on-secondary-fixed: var(--on-secondary-fixed);
    --color-on-secondary-fixed-variant: var(--on-secondary-fixed-variant);
    --color-tertiary: var(--tertiary);
    --color-tertiary-container: var(--tertiary-container);
    --color-on-tertiary: var(--on-tertiary);
    --color-on-tertiary-container: var(--on-tertiary-container);
    --color-tertiary-fixed: var(--tertiary-fixed);
    --color-tertiary-fixed-dim: var(--tertiary-fixed-dim);
    --color-on-tertiary-fixed: var(--on-tertiary-fixed);
    --color-on-tertiary-fixed-variant: var(--on-tertiary-fixed-variant);
    --color-error: var(--error);
    --color-error-container: var(--error-container);
    --color-on-error: var(--on-error);
    --color-on-error-container: var(--on-error-container);
    --color-inverse-surface: var(--inverse-surface);
    --color-inverse-on-surface: var(--inverse-on-surface);
    --color-inverse-primary: var(--inverse-primary);
    --color-priority-high: #ef4444;
    --color-priority-medium: #f59e0b;
    --color-priority-low: #3b82f6;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {
    body,
    html {
        --font-sans:
            Inter, "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
            "Noto Color Emoji";
    }
}

:root {
    --background: #f7f9fb;
    --foreground: #191c1e;
    --card: #ffffff;
    --card-foreground: #191c1e;
    --popover: #ffffff;
    --popover-foreground: #191c1e;
    --primary: #006e2f;
    --primary-foreground: #ffffff;
    --secondary: #d0e1fb;
    --secondary-foreground: #0b1c30;
    --muted: #f2f4f6;
    --muted-foreground: #3d4a3d;
    --accent: #e6e8ea;
    --accent-foreground: #191c1e;
    --destructive: #ba1a1a;
    --destructive-foreground: #ffffff;
    --border: #bccbb9;
    --input: #bccbb9;
    --ring: #006e2f;
    --chart-1: #22c55e;
    --chart-2: #3b82f6;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
    --chart-5: #505f76;
    --radius: 0.25rem;
    --surface: #f7f9fb;
    --surface-dim: #d8dadc;
    --surface-bright: #f7f9fb;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f2f4f6;
    --surface-container: #eceef0;
    --surface-container-high: #e6e8ea;
    --surface-container-highest: #e0e3e5;
    --surface-variant: #e0e3e5;
    --surface-tint: #006e2f;
    --on-surface: #191c1e;
    --on-surface-variant: #3d4a3d;
    --on-background: #191c1e;
    --outline: #6d7b6c;
    --outline-variant: #bccbb9;
    --primary-container: #22c55e;
    --on-primary: #ffffff;
    --on-primary-container: #004b1e;
    --primary-fixed: #6bff8f;
    --primary-fixed-dim: #4ae176;
    --on-primary-fixed: #002109;
    --on-primary-fixed-variant: #005321;
    --secondary-container: #d0e1fb;
    --on-secondary: #ffffff;
    --on-secondary-container: #54647a;
    --secondary-fixed: #d3e4fe;
    --secondary-fixed-dim: #b7c8e1;
    --on-secondary-fixed: #0b1c30;
    --on-secondary-fixed-variant: #38485d;
    --tertiary: #9e4036;
    --tertiary-container: #ff8b7c;
    --on-tertiary: #ffffff;
    --on-tertiary-container: #76231b;
    --tertiary-fixed: #ffdad5;
    --tertiary-fixed-dim: #ffb4a9;
    --on-tertiary-fixed: #410001;
    --on-tertiary-fixed-variant: #7f2a21;
    --error: #ba1a1a;
    --error-container: #ffdad6;
    --on-error: #ffffff;
    --on-error-container: #93000a;
    --inverse-surface: #2d3133;
    --inverse-on-surface: #eff1f3;
    --inverse-primary: #4ae176;
    --sidebar-background: #f2f4f6;
    --sidebar-foreground: #191c1e;
    --sidebar-primary: #006e2f;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #e6e8ea;
    --sidebar-accent-foreground: #191c1e;
    --sidebar-border: #bccbb9;
    --sidebar-ring: #006e2f;
    --sidebar: #f2f4f6;
}

.dark {
    --background: #0f172a;
    --foreground: #eff1f3;
    --card: #111827;
    --card-foreground: #eff1f3;
    --popover: #111827;
    --popover-foreground: #eff1f3;
    --primary: #4ae176;
    --primary-foreground: #002109;
    --secondary: #1f2937;
    --secondary-foreground: #eff1f3;
    --muted: #1e293b;
    --muted-foreground: #cbd5e1;
    --accent: #1e293b;
    --accent-foreground: #eff1f3;
    --destructive: #f87171;
    --destructive-foreground: #ffffff;
    --border: #334155;
    --input: #334155;
    --ring: #4ae176;
    --chart-1: #4ae176;
    --chart-2: #60a5fa;
    --chart-3: #fbbf24;
    --chart-4: #f87171;
    --chart-5: #b7c8e1;
    --surface: #0f172a;
    --surface-dim: #020617;
    --surface-bright: #111827;
    --surface-container-lowest: #111827;
    --surface-container-low: #1e293b;
    --surface-container: #263445;
    --surface-container-high: #334155;
    --surface-container-highest: #475569;
    --surface-variant: #334155;
    --surface-tint: #4ae176;
    --on-surface: #eff1f3;
    --on-surface-variant: #cbd5e1;
    --on-background: #eff1f3;
    --outline: #94a3b8;
    --outline-variant: #334155;
    --primary-container: #14532d;
    --on-primary: #002109;
    --on-primary-container: #bbf7d0;
    --primary-fixed: #6bff8f;
    --primary-fixed-dim: #4ae176;
    --on-primary-fixed: #002109;
    --on-primary-fixed-variant: #005321;
    --secondary-container: #1e3a5f;
    --on-secondary: #ffffff;
    --on-secondary-container: #d0e1fb;
    --secondary-fixed: #d3e4fe;
    --secondary-fixed-dim: #b7c8e1;
    --on-secondary-fixed: #0b1c30;
    --on-secondary-fixed-variant: #38485d;
    --tertiary: #ffb4a9;
    --tertiary-container: #7f2a21;
    --on-tertiary: #410001;
    --on-tertiary-container: #ffdad5;
    --tertiary-fixed: #ffdad5;
    --tertiary-fixed-dim: #ffb4a9;
    --on-tertiary-fixed: #410001;
    --on-tertiary-fixed-variant: #ffb4a9;
    --error: #f87171;
    --error-container: #7f1d1d;
    --on-error: #ffffff;
    --on-error-container: #fee2e2;
    --inverse-surface: #eff1f3;
    --inverse-on-surface: #191c1e;
    --inverse-primary: #006e2f;
    --sidebar-background: #111827;
    --sidebar-foreground: #eff1f3;
    --sidebar-primary: #4ae176;
    --sidebar-primary-foreground: #002109;
    --sidebar-accent: #1e293b;
    --sidebar-accent-foreground: #eff1f3;
    --sidebar-border: #334155;
    --sidebar-ring: #4ae176;
    --sidebar: #111827;
}

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