@tailwind base;
@layer base {
  :root {
    --color-text-base: 0, 0, 0;
    --color-text-muted: 120, 120, 120;
    --color-text-inverted: 255, 255, 255;
    --color-fill: 245, 245, 245;
    --muted: 200, 200, 200;
    --color: 249, 115, 22;
    --color-button-accent: 249, 115, 22;
    --color-button-accent-hover: 55, 55, 55;
    --color-button-muted: 244, 239, 238;

    --color-bg-elevated: 8, 14, 24;          /* kort/paneler */
    --color-bg-input: 8, 14, 24;             /* inputs/selects */
    --color-border: 189, 150, 255;
    --color-ring: 189, 150, 255;
    --color-ring-muted: 189, 150, 255;
    
    [data-theme="blue"] {
      --color-text-base: 15, 23, 42;
      --color-text-muted: 100, 116, 139;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 203, 213, 225;
      --muted: 148, 163, 184;
      --color: 59, 130, 246;
      --color-button-accent: 59, 130, 246;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 226, 232, 240;
    }
    [data-theme="red"] {
      --color-text-base: 28, 25, 23;
      --color-text-muted: 100, 100, 100;
      --color-text-inverted: 245, 245, 245;
      --color-fill: 231, 229, 228;
      --muted: 220, 220, 220;
      --color: 239, 68, 68;
      --color-button-accent: 239, 68, 68;
      --color-button-accent-hover: 220, 50, 70;
      --color-button-muted: 245, 245, 245;
    }
    [data-theme="green"] {
      --color-text-base: 40, 40, 40;
      --color-text-muted: 110, 110, 110;
      --color-text-inverted: 230, 230, 230;
      --color-fill: 236, 252, 203;
      --muted: 189, 220, 147;
      --color: 101, 163, 13;
      --color-button-accent: 101, 163, 13;
      --color-button-accent-hover: 120, 220, 120;
      --color-button-muted: 211, 235, 173;
    }
    [data-theme="lond"] {
      /* Tekstfarger */
      --color-text-base: 17, 13, 22;       /* hovedtekst (nær svart, men mykere) */
      --color-text-muted: 75, 70, 83;   /* sekundær tekst */
      --color-text-inverted: 250, 250, 252;/* invers (på knapper med mørk bakgrunn) */

      /* Bakgrunn og paneler */
      --color-fill: 248, 249, 252;         /* bakgrunn (svært lys, litt blålig) */
      --muted: 134, 94, 197;              /* borders / cards / historikklinje */

      /* Aksenter (samme som dark) */
      --color: 143, 76, 255; /* aksent */
      --color-button-accent: 143, 76, 255; /* primærknapp */
      --color-button-accent-hover: 124, 45, 255; /* mørkere lilla ved hover */
      --color-button-muted: 242, 244, 248; /* “kort”-bakgrunn/paneler i lys modus */

      /* Gradient-bakgrunn: subtil lys glød i lilla/blå */
      --bg-gradient:
        /* Lilla glød top-right */
        radial-gradient(60% 60% at 80% 25%,
          rgba(212, 187, 255, 0.92) 10%,
          rgba(189, 150, 255, 0.40) 35%,
          rgba(189, 150, 255, 0.10) 70%)
        ,
        /* Blå glød top-left */
        radial-gradient(55% 55% at 15% 10%,
          rgba(173, 202, 255, 0.98) 0%,
          rgba(80, 140, 255, 0.08) 68%,
          rgba(80, 140, 255, 0.00) 95%)
        ,
        /* Svak skygge i bunn for dybde */
        radial-gradient(65% 55% at 20% 100%,
          rgba(0, 0, 0, 0.06) 0%,
          rgba(0, 0, 0, 0.03) 40%,
          rgba(0, 0, 0, 0.00) 70%)
        ,
        rgb(var(--color-fill)); /* base */

      --color-bg-elevated: 255, 255, 255;          /* kort/paneler */
      --color-bg-input: 202, 213, 254;             /* inputs/selects */
      --color-border: 189, 150, 255;
      --color-ring: 189, 150, 255;
      --color-ring-muted: 189, 150, 255;

    }
    [data-theme="cyber"] {
      --color-text-base: 15, 15, 15;
      --color-text-muted: 144, 135, 5;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 252, 255, 64;
      --muted: 50, 50, 50;
      --color: 235, 21, 43;
      --color-button-accent: 235, 21, 43;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 249, 239, 6;
    }

    [data-theme="lavender"] {
      --color-text-base: 20, 20, 30;          /* mørk tekst for god lesbarhet */
      --color-text-muted: 110, 110, 130;      /* dempet grå-lilla */
      --color-text-inverted: 255, 255, 255;   /* hvit på knapper/badges */

      --color-fill: 247, 245, 252;            /* lys lavender-bakgrunn */
      --muted: 224, 217, 238;                 /* dempet panel/border */

      --color: 168, 124, 232;                 /* primær accent (lavender) */
      --color-button-accent: 168, 124, 232;   /* primær knapp */
      --color-button-accent-hover: 146, 108, 216; /* litt mørkere ved hover */
      --color-button-muted: 236, 231, 245;    /* sekundær knapp/badge */
    }

        [data-theme="int"] {
      --color-text-base:  7, 22, 39;          /* overskrift tekstfarge int */
      --color-text-muted: 110, 110, 130;
      --color-text-inverted: 255, 255, 255;   /* Hover farge på knapper int */

      --color-fill: 243, 243, 246; /* int bakgrunn*/
      --muted: 192, 196, 200;         /* progresslinja int */    

      --color: 0, 115, 117;  /* accentfarge int */
      --color-button-accent: 0, 115, 117;   /* fyllfargen til knapper, og til baren nederst på skjermen int */
      --color-button-accent-hover: 255, 0, 0; /* idk really */
      --color-button-muted: 255, 255, 255;   /* proskjektboksene int */
    }
  }
  .dark {
    --color-text-base: 255, 255, 255; 
    --color-text-muted: 150, 150, 150;
    --color-text-inverted: 255, 255, 255;
    --color-fill: 18, 18, 18;
    --muted: 36, 36, 36;
    --color: 227, 77, 10;
    --color-button-accent: 227, 77, 10;
    --color-button-accent-hover: 231, 121, 43;
    --color-button-muted: 26, 26, 26;
    [data-theme="blue"] {
      --color-text-base: 248, 250, 252;
      --color-text-muted: 148, 163, 184;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 2, 6, 23;
      --muted: 51, 65, 85;
      --color: 59, 130, 246;
      --color-button-accent: 59, 130, 246;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 30, 41, 59;
    }
    [data-theme="red"] {
      --color-text-base: 231, 229, 228;
      --color-text-muted: 168, 162, 158;
      --color-text-inverted: 245, 245, 245;
      --color-fill: 28, 25, 23;
      --muted: 45, 45, 45;
      --color: 248, 113, 113;
      --color-button-accent: 248, 113, 113;
      --color-button-accent-hover: 220, 50, 70;
      --color-button-muted: 120, 113, 108; 
    }
    [data-theme="green"] {
      --color-text-base: 230, 230, 230;
      --color-text-muted: 104, 124, 104;
      --color-text-inverted: 230, 230, 230;
      --color-fill: 10, 20, 10;
      --muted: 54, 64, 54;
      --color: 132, 204, 22;
      --color-button-accent: 132, 204, 22;
      --color-button-accent-hover: 120, 220, 120;
      --color-button-muted: 34, 44, 34;
    }

    [data-theme="lond"] {
      --color-text-base: 243, 243, 246; /* overskrift tekstfarge */
      --color-text-muted: 170, 170, 185; /* tekstfarge grå */
      --color-text-inverted: 11, 18, 32; /* Hover farge på knapper */

      --color-fill: 11, 18, 32; /* bakgrunnsfarge */
      --muted: 97, 84, 117; /* historikklinja og border til proskjektboksene */

      --color: 189, 150, 255; /* accentfarge */
      --color-button-accent: 189, 150, 255; /* fyllfargen til knapper, og til baren nederst på skjermen */
      --color-button-accent-hover: 205, 176, 255; /* hover farge på knapper */
      --color-button-muted: 18, 28, 40; /* proskjektboksene */

      --bg-gradient:
        /* Hovedblob (lilla) - sterkere */
        radial-gradient(70% 70% at 80% 40%,
          rgba(99, 35, 89, 0.95) 0%,
          rgba(99, 35, 89, 0.22) 45%,
          rgba(99, 35, 89, 0.00) 78%)
        ,
        /* Sekundær blob (blå) - vil ha denne til å lyse i høyre hjørne */
        radial-gradient(65% 65% at 20% 0%,
          rgba(35, 73, 139, 0.35) 0%,
          rgba(35, 73, 139, 0.10) 25%,
          rgba(35, 73, 139, 0.00) 40%)
        ,
        /* Ekstra lilla for å gjøre den tydeligst (bunn) */
        radial-gradient(80% 70% at 10% 55%,
          rgba(0, 0, 0, 0.4) 0%,
          rgba(0, 0, 0, 0.18) 60%,
          rgba(27, 45, 75, 0.00) 72%)
        ,
        radial-gradient(60% 60% at 20% 100%,
          rgba(0, 0, 0, 0.4) 0%,
          rgba(0, 0, 0, 0.18) 60%,
          rgba(27, 45, 75, 0.00) 72%)
        ,
        rgb(var(--color-fill)); /* base */

      --color-bg-elevated: 8, 14, 24;          /* kort/paneler */
      --color-bg-input: 8, 14, 24;             /* inputs/selects */
      --color-border: 189, 150, 255;
      --color-ring: 189, 150, 255;
      --color-ring-muted: 189, 150, 255;

    }
    [data-theme="cyber"] {
      --color-text-base: 252, 255, 64;
      --color-text-muted: 125, 125, 125;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 15, 15, 15;
      --muted: 50, 50, 50;
      --color: 90, 237, 251;
      --color-button-accent: 90, 237, 251;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 25, 81, 86;
    }
    [data-theme="lavender"] {
      --color-text-base: 240, 240, 245;
      --color-text-muted: 170, 170, 185;
      --color-text-inverted: 20, 20, 30;

      --color-fill: 28, 24, 38;
      --muted: 56, 50, 70;

      --color: 189, 150, 255;
      --color-button-accent: 189, 150, 255;
      --color-button-accent-hover: 210, 175, 255;
      --color-button-muted: 40, 36, 52;
    }
        [data-theme="int"] {
      --color-text-base: 243, 243, 246; /* overskrift tekstfarge int */
      --color-text-muted: 170, 170, 185; /* tekstfarge */
      --color-text-inverted: 7, 22, 39; /* Hover farge på knapper int */

      --color-fill: 7, 22, 39; /* bakgrunnsfarge int */
      --muted: 40, 56, 72; /* progresslinja int */

      --color: 13, 242, 215; /* accentfarge int */
      --color-button-accent: 13, 242, 215; /* fyllfargen til knapper, og til baren nederst på skjermen int */
      --color-button-accent-hover: 255, 0, 0; /* idk really */
      --color-button-muted: 15, 33, 51; /* proskjektboksene int */
    }
}
}


.bg-tri-bg {
  background: var(--bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-tri {
  background: var(--bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;
}

[data-theme="lond"] .exp-fade::after {
  background: linear-gradient(
    to top,
    rgba(159, 153, 182, 0.35) 0%,
    rgba(159, 153, 182, 0.12) 45%,
    rgba(159, 153, 182, 0.00) 100%
  );
}

.dark [data-theme="lond"] .exp-fade::after {
  background: linear-gradient(
    to top,
    rgba(1, 1, 2, 0.22) 0%,
    rgba(30, 21, 48, 0.18) 45%,
    rgba(0, 0, 0, 0.00) 100%
  );
}