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

@layer base {
	@font-face {
		font-family: "Monofur for Powerline";
		src: url('/fonts/monofur.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

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

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;

    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 255, 242, 215;
    --background-end-rgb: 255, 249, 237;

    --foreground-accent-rgb: 255, 127, 62;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: 0 0% 3.9%;
      --foreground: 0 0% 98%;

      --card: 0 0% 3.9%;
      --card-foreground: 0 0% 98%;

      --popover: 0 0% 3.9%;
      --popover-foreground: 0 0% 98%;

      --primary: 0 0% 98%;
      --primary-foreground: 0 0% 9%;

      --secondary: 0 0% 14.9%;
      --secondary-foreground: 0 0% 98%;

      --muted: 0 0% 14.9%;
      --muted-foreground: 0 0% 63.9%;

      --accent: 0 0% 14.9%;
      --accent-foreground: 0 0% 98%;

      --destructive: 0 62.8% 30.6%;
      --destructive-foreground: 0 0% 98%;

      --border: 0 0% 14.9%;
      --input: 0 0% 14.9%;
      --ring: 0 0% 83.1%;

      --foreground-rgb: 255, 255, 255;
      --background-start-rgb: 0, 0, 0;
      --background-end-rgb: 0, 0, 0;
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    color: rgb(var(--foreground-rgb));
    background: linear-gradient(
        to bottom,
        transparent,
        rgb(var(--background-end-rgb))
      )
      rgb(var(--background-start-rgb));
  }
}

@layer components {
  .main-spacing {
    @apply flex-col mx-auto min-h-screen max-w-screen-lg p-8 py-4;
  }

  .nav-extras {
    @apply inline;
  }
  .nav-more {
    @apply hidden;
  }

  @media (max-width: 932px) {
    .nav-extras {
      @apply hidden;
    }
    .nav-more {
      @apply inline;
    }
  }

  .title-gradient {
    background-color: #ff7f3e;
    background-image: linear-gradient(to right, #ff7f3e, #af4261);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
  }

  .title-dot {
    background-color: #1c78ad;
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
  }

  .text-title {
    @apply text-crusta-400
  }
  .text-subtitle {
    @apply text-crusta-800;
  }
  .text-disabled {
    @apply text-crusta-300
  }
  .text-paragraph {
    @apply text-black;
  }

  @media (prefers-color-scheme: dark) {
    .title-gradient {
      background-color: #cbd0fa;
      background-image: linear-gradient(to right, #cbd0fa, #8989f0);
      background-size: 100%;
      -webkit-background-clip: text;
      -moz-background-clip: text;
      -webkit-text-fill-color: transparent; 
      -moz-text-fill-color: transparent;
    }

    .title-dot {
      background-color: #fba63c;
      background-size: 100%;
      -webkit-background-clip: text;
      -moz-background-clip: text;
      -webkit-text-fill-color: transparent; 
      -moz-text-fill-color: transparent;
    }
    .text-title {
      @apply text-night-300
    }
    .text-subtitle {
      @apply text-night-400;
    }
    .text-disabled {
      @apply text-night-600
    }
    .text-paragraph {
      @apply text-night-50;
    }
  }

  /***** PRISM *****/
  .token.plain {
      @apply text-slate-100
  }
  .token.keyword {
      @apply text-selenized-dark-brMagenta
  }
  .token.builtin {
      @apply text-selenized-dark-cyan
  }
  .token.class-name, 
  .token.function {
      @apply text-selenized-dark-customYellow
  }
  .token.boolean,
  .token.number, 
  .token.symbol {
      @apply text-selenized-dark-brBlue
  }
  .token.string, 
  .token.char, 
  .token.url {
      @apply text-selenized-dark-yellow
  }
  .token.constant, 
  .token.property, 
  .token.tag {
      @apply text-selenized-dark-blue
  }
  .token.attr-name {
      @apply text-selenized-dark-cyan
  }
  .token.attr-value {
      @apply text-selenized-dark-green
  }
  .token.regex ,
  .token.variable {
      @apply text-selenized-dark-red
  }
  .token.punctuation,
  .token.operator {
      @apply text-slate-100
  }
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
      @apply text-selenized-dark-brGreen italic
  }
  .token.triple-quoted-string {
      @apply text-selenized-dark-brOrange
  }

  @media (prefers-color-scheme: light) {
    .token.plain {
        @apply text-neutral-800
    }
    .token.keyword {
        @apply text-selenized-light-brMagenta
    }
    .token.builtin {
        @apply text-selenized-light-cyan
    }
    .token.class-name, 
    .token.function {
        @apply text-selenized-light-yellow
    }
    .token.boolean,
    .token.number, 
    .token.symbol {
        @apply text-selenized-light-brBlue
    }
    .token.string, 
    .token.char, 
    .token.url {
        @apply text-selenized-light-yellow
    }
    .token.constant, 
    .token.property, 
    .token.tag {
        @apply text-selenized-light-blue
    }
    .token.attr-name {
        @apply text-selenized-light-cyan
    }
    .token.attr-value {
        @apply text-selenized-light-green
    }
    .token.regex ,
    .token.variable {
        @apply text-selenized-light-red
    }
    .token.punctuation,
    .token.operator {
        @apply text-neutral-800
    }
    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
        @apply text-selenized-light-brGreen italic
    }
    .token.triple-quoted-string {
        @apply text-selenized-light-brOrange
    }
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}