@import './assets/fonts.css';

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

/* OHIF Theme */
@layer base {
  :root {
    --highlight: 158 40% 42%; /* #397B60 green highlight */

    --neutral: 160 10% 35%; /* medium green grey */
    --neutral-light: 160 15% 55%; /* lighter green grey */
    --neutral-dark: 160 15% 15%; /* dark green grey */

    --background: 160 20% 8%; /* very dark greenish background */
    --foreground: 0 0% 98%; /* near-white */

    --card: 160 12% 12%; /* dark green card */
    --card-foreground: 0 0% 98%;

    --popover: 160 12% 10%;
    --popover-foreground: 0 0% 98%;

    --primary: 158 40% 42%; /* #397B60 green */
    --primary-foreground: 0 0% 98%;

    --secondary: 160 15% 25%; /* softer green-grey */
    --secondary-foreground: 0 0% 98%;

    --muted: 160 12% 18%; /* muted green grey */
    --muted-foreground: 160 12% 65%;

    --accent: 160 12% 12%; /* green-cyan accent */
    --accent-foreground: 0 0% 98%;

    --destructive: 5 70% 40%; /* keep destructive red */
    --destructive-foreground: 0 0% 98%;

    --border: 160 10% 20%;
    --input: 160 10% 28%;

    --ring: 158 40% 42%; /* green focus */

    /* Charts */
    --chart-1: 158 40% 42%; /* green */
    --chart-2: 160 12% 35%; /* dark green grey */
    --chart-3: 160 12% 55%; /* lighter */
    --chart-4: 160 12% 70%; /* even lighter */
    --chart-5: 160 12% 85%; /* soft greenish white */

    --radius: 0.5rem;

    /* Feedback colors remain semantic */
    --success-bg: hsl(143, 85%, 96%);
    --success-border: hsl(145, 92%, 91%);
    --success-text: hsl(140, 100%, 27%);

    --info-bg: hsl(188, 100%, 97%);
    --info-border: hsl(190, 91%, 91%);
    --info-text: hsl(188, 92%, 35%);

    --warning-bg: hsl(49, 100%, 97%);
    --warning-border: hsl(49, 91%, 91%);
    --warning-text: hsl(31, 92%, 45%);

    --error-bg: hsl(359, 100%, 97%);
    --error-border: hsl(359, 100%, 94%);
    --error-text: hsl(360, 100%, 45%);
  }

  .dark {
    --background: 160 20% 7%; /* darker green bg */
    --foreground: 0 0% 98%;

    --card: 160 12% 10%;
    --card-foreground: 0 0% 98%;

    --popover: 160 12% 9%;
    --popover-foreground: 0 0% 98%;

    --primary: 160 30% 20%; /* #1D2A29 deep */
    --primary-foreground: 0 0% 98%;

    --secondary: 160 15% 25%;
    --secondary-foreground: 0 0% 98%;

    --muted: 160 12% 15%;
    --muted-foreground: 160 10% 65%;

    --accent: 158 40% 42%; /* #397B60 */
    --accent-foreground: 0 0% 98%;

    --destructive: 5 70% 40%;
    --destructive-foreground: 0 0% 98%;

    --border: 160 10% 20%;
    --input: 160 10% 28%;

    --ring: 158 40% 42%;

    --chart-1: 158 40% 42%;
    --chart-2: 160 12% 35%;
    --chart-3: 160 12% 55%;
    --chart-4: 160 12% 70%;
    --chart-5: 160 12% 85%;
  }
}

/* ORIGINAL THEME for comparison and testing

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 72.22% 50.59%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5% 64.9%;
    --radius: 0.5rem;

    --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%;
  }


  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;

    --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%;
  }
}

*/

/* Theme Copy Example

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 360 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
    --chart-1: ;
    --chart-2: ;
    --chart-3: ;
    --chart-4: ;
    --chart-5: ;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 360 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
    --chart-1: ;
    --chart-2: ;
    --chart-3: ;
    --chart-4: ;
    --chart-5: ;
  }
}

*/

/* Updated Playground page styles */

@layer base {
  html {
    font-family: 'Inter', sans-serif;
  }

  body {
    @apply !bg-black;
  }
}

h2.section-header {
  @apply py-4 text-2xl font-normal text-white;
}

h3.section-header {
  @apply py-3 text-xl text-white;
}

.row {
  @apply mb-6 flex flex-row flex-wrap rounded-md border py-10;
}

.example {
  @apply flex-initial px-6;
}

.example2 {
  @apply flex-initial px-4;
}

/* Additional CSS edits to components */

/* Tooltip */

.TooltipContent[data-side='bottom'] {
  animation-name: slideDown;
}

/* Custom CSS to hide default number input arrows */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  @apply appearance-none;
}

input[type='number'] {
  -moz-appearance: textfield; /* For Firefox */
}