@layer base, starlight, theme, components, utilities;

@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

@theme {
  --font-cal: "calsans", "sans-serif";
  --font-mono: 'CommitMono', 'sans-serif';
  --font-sans: 'Inter', 'sans-serif';
}

@layer base {
  @font-face {
    font-family: 'calsans';
    src: url('/fonts/CalSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'CommitMono';
    src:
        url('/fonts/CommitMono-400-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'CommitMono';
    src:
        url('/fonts/CommitMono-700-Regular.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
}

@layer base {
    h1 {
        letter-spacing: var(--tracking-tight);
    }
    h2 {
        letter-spacing: var(--tracking-tighter);
    }


    :root[data-theme='light'] {
      --background: 0 0% 100%;
      --foreground: 222.2 84% 4.9%;

      --muted: 210 40% 96.1%;
      --muted-foreground: 215.4 16.3% 46.9%;

      --popover: 0 0% 100%;
      --popover-foreground: 222.2 84% 4.9%;

      --card: 0 0% 100%;
      --card-foreground: 222.2 84% 4.9%;

      --border: 214.3 31.8% 91.4%;
      --input: 214.3 31.8% 91.4%;

      --primary: 222.2 47.4% 11.2%;
      --primary-foreground: 210 40% 98%;

      --secondary: 210 40% 96.1%;
      --secondary-foreground: 222.2 47.4% 11.2%;

      --accent: 210 40% 96.1%;
      --accent-foreground: 222.2 47.4% 11.2%;

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

      --ring: 215 20.2% 65.1%;

      --radius: 0.5rem;

      /** Chart Colors */
      --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%;

      /* Status Tracker Colors - Radix Color */
      --status-degraded: 50 100% 52%; /* Amber 10 */
      --status-operational: 131 39% 51%; /* Grass 10 */
      --status-down: 11 82% 59%; /* Tomato 10 */
      --status-monitoring: 210 100% 62%; /* Blue 10 */
    }

    :root {
      --background: 222.2 84% 4.9%;
      --foreground: 210 40% 98%;

      --muted: 217.2 32.6% 17.5%;
      --muted-foreground: 215 20.2% 65.1%;

      --popover: 222.2 84% 4.9%;
      --popover-foreground: 210 40% 98%;

      --card: 222.2 84% 4.9%;
      --card-foreground: 210 40% 98%;

      --border: 217.2 32.6% 17.5%;
      --input: 217.2 32.6% 17.5%;

      --primary: 210 40% 98%;
      --primary-foreground: 222.2 47.4% 11.2%;

      --secondary: 217.2 32.6% 17.5%;
      --secondary-foreground: 210 40% 98%;

      --accent: 217.2 32.6% 17.5%;
      --accent-foreground: 210 40% 98%;

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

      --ring: 217.2 32.6% 17.5%;

      /* Chart Colors */
      --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%;

      /* Status Tracker Colors - Radix Color */
      --status-degraded: 50 100% 52%; /* Amber 10 */
      --status-operational: 131 39% 51%; /* Grass 10 */
      --status-down: 11 82% 59%; /* Tomato 10 */
      --status-monitoring: 210 100% 62%; /* Blue 10 */

    }
  }

/* https://ui.shadcn.com/colors */

/* Dark mode colors. */
:root {
	--sl-color-accent-low: #020817;
	--sl-color-accent: #f8fafc;
	--sl-color-accent-high: #f1f5f9;
	--sl-color-white: #f8fafc;
	--sl-color-gray-1: #f1f5f9;
	--sl-color-gray-2: #94a3b8;
	--sl-color-gray-3: #64748b;
	--sl-color-gray-4: #475569;
	--sl-color-gray-5: #1e293b;
	--sl-color-gray-6: #0f172a;
	--sl-color-black: #020817;
}

/* Light mode colors. */
:root[data-theme='light'] {
	--sl-color-accent-low: #f8fafc;
	--sl-color-accent: #020817;
	--sl-color-accent-high: #0f172a;
	--sl-color-white: #020817;
	--sl-color-gray-1: #0f172a;
	--sl-color-gray-2: #1e293b;
	--sl-color-gray-3: #475569;
	--sl-color-gray-4: #64748b;
	--sl-color-gray-5: #94a3b8;
	--sl-color-gray-6: #f1f5f9;
	--sl-color-gray-7: #f8fafc;
	--sl-color-black: #ffffff;
}