@import 'tailwindcss/preflight' layer(base);

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

  body {
    font-family: var(--default-font-family);
  }

  :where(
    button,
    [type='button'],
    [type='reset'],
    [type='submit'],
    [role='button'],
    a[href],
    label[for],
    summary,
    select,
    option,
    input[type='checkbox'],
    input[type='radio'],
    input[type='file'],
    input[type='image']
  ):not(:disabled, [aria-disabled='true']) {
    cursor: pointer;
  }

  /* COLOR */
  :root {
    /* Default background color of <body />...etc */
    --background: 0 0% 96%;
    --foreground: 0 0% 11%;
    --primary-orange: 36 100% 55%;

    /* Background color for <Card /> */
    --card: 0 0% 98%;
    --card-foreground: 0 0% 14%;

    /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
    --popover: 0, 0%, 98%;
    --popover-foreground: 0 0% 15%;

    /* Primary colors for <Button /> */
    --primary: 215 92% 29%;
    --primary-foreground: 50 82% 50%;
    --primary-orange: 36 100% 55%;

    /* Secondary colors for <Button /> */
    --secondary: 175 36% 88%;
    --secondary-foreground: 158 83% 14%;

    /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
    --muted: 0 0% 91%;
    --muted-foreground: 50 82% 50%;

    /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
    --accent: 175 32% 92%;
    --accent-foreground: 159 83% 7%;

    /* Used for destructive actions such as <Button variant="destructive"> */
    --destructive: 357 76% 49%;
    --destructive-foreground: 0 0% 100%;

    /* Used for success actions such as <Button variant="success"> */
    --success: 138 75% 22%;
    --success-foreground: 136 100% 95%;

    /* Used for info actions such as <Button variant="info"> */
    --info: 220 68% 52%;
    --info-foreground: 217 100% 91%;

    /* Used for warning actions such as <Button variant="warning"> */
    --warning: 25 100% 58%;
    --warning-foreground: 46 92% 95%;

    /* Default border color */
    --border: 0 0% 90%;

    /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
    --input: 214, 30%, 91%;

    /* Used for focus ring */
    --ring: 158 83% 14%;

    /* Border radius for card, input and buttons */
    --radius: 0.5rem;

    /* Charts */
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

    /* Sidebar */
    --sidebar-background: 210 20% 98%;
    --sidebar-foreground: 0 0% 11%;
    --sidebar-primary: 158 83% 14%;
    --sidebar-primary-foreground: 156 100% 99%;
    --sidebar-accent: 175 32% 92%;
    --sidebar-accent-foreground: 159 83% 7%;
    --sidebar-border: 0 0% 89.8%;
    --sidebar-ring: 158 83% 14%;

    /* Header */
    --header-primary: 158 100% 12%;
  }

  .dark {
    /* Default background color of <body />...etc */
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

    /* Background color for <Card /> */
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    /* Primary colors for <Button /> */
    --primary: 0 0% 98%;
    --primary-foreground: 227 53% 28%;
    --primary-orange: 36 100% 55%;
    /* USER DEFINED */

    /* Secondary colors for <Button /> */
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    /* Used for destructive actions such as <Button variant="destructive"> */
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    /* Used for success actions */
    --success: 142.1 76.2% 36.3%;
    --success-foreground: 210 40% 98%;

    /* Used for warning actions */
    --warning: 48 96% 89%;
    --warning-foreground: 38 92% 50%;

    /* Default border color */
    --border: 0 0% 14.9%;

    /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
    --input: 0 0% 14.9%;

    /* Used for focus ring */
    --ring: 0 0% 83.1%;

    /* Charts */
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    /* Sidebar */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Header */
    --header-primary: 162, 15%, 17%;
  }
}
