/*
 *   This file is a part of the SteamWar software.
 *
 *   Copyright (C) 2025 SteamWar.de-Serverteam
 *
 *   This program is free software: you can redistribute it and/or modify
 *   it under the terms of the GNU Affero General Public License as published by
 *   the Free Software Foundation, either version 3 of the License, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 *   GNU Affero General Public License for more details.
 *
 *   You should have received a copy of the GNU Affero General Public License
 *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

@import "tailwindcss";

@theme {
  --font-sans: var(--font-roboto), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-barlow-condensed), sans-serif;

  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-ring: hsl(var(--ring));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}
 
@layer base {
  :root {
    --background: 0 0% 3.1%;
    --foreground: 0 0% 96%;

    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 55%;

    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 96%;

    --card: 0 0% 5%;
    --card-foreground: 0 0% 96%;

    --border: 0 0% 12%;
    --input: 0 0% 12%;

    --primary: 38 92% 50%;
    --primary-foreground: 0 0% 4%;

    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 96%;

    --accent: 38 92% 50%;
    --accent-foreground: 0 0% 4%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --ring: 38 92% 50%;

    --radius: 0;

    --sw-bg: #080808;
    --sw-bg-raised: #0c0c0c;
    --sw-bg-surface: #111111;
    --sw-amber: #f59e0b;
    --sw-amber-light: #fbbf24;
    --sw-amber-dim: rgba(245, 158, 11, 0.15);
    --sw-text: #f5f5f5;
    --sw-text-muted: #a3a3a3;
    --sw-border: rgba(255, 255, 255, 0.06);
  }

  .dark {
    --background: 0 0% 3.1%;
    --foreground: 0 0% 96%;

    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 55%;

    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 96%;

    --card: 0 0% 5%;
    --card-foreground: 0 0% 96%;

    --border: 0 0% 12%;
    --input: 0 0% 12%;

    --primary: 38 92% 50%;
    --primary-foreground: 0 0% 4%;

    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 96%;

    --accent: 38 92% 50%;
    --accent-foreground: 0 0% 4%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

    --ring: 38 92% 50%;
  }
}
 
@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: var(--sw-bg);
    color: var(--sw-text);
  }

  ::selection {
    background: rgba(245, 158, 11, 0.3);
    color: #fff;
  }
  
  article {
    > * {
        all: revert;
    }

    code {
        color: var(--sw-amber-light);
        background: rgba(245, 158, 11, 0.08);
        padding: 0.15em 0.4em;
    }

    pre.astro-code {
        width: fit-content;
        padding: 1rem;
        margin: 1rem 0;
        border: 1px solid var(--sw-border);
        background: var(--sw-bg) !important;
    }

    a {
        color: var(--sw-amber);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s ease;
    }

    a:hover {
        border-bottom-color: var(--sw-amber);
    }
  }
}