@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");

@import "tailwindcss";

:root {
    color-scheme: dark;

    /* core ayu colors */
    --ayu-bg: #10141c;
    --ayu-bg-50percent: #00000080;
    --ayu-fg: #bfbdb6;
    --ayu-accent: #e6b450;
    --ayu-highlight: #161a24;
    --ayu-popup: #141821;
    --ayu-link: #59c2ff;
    --ayu-selection: #3388ff;
    --ayu-inactive: #80b5ff;
    --ayu-gutter: #6c7380;
    --ayu-gutter-dim: #364253;
    --ayu-guide: #6c7380;
    --ayu-shadow: #10141c;

    /* diff colors */
    --ayu-added: #7fd962;
    --ayu-modified: #73b8ff;
    --ayu-deleted: #f26d78;

    /* semantic colors */
    --ayu-primary: #e6b450;
    --ayu-secondary: #59c2ff;
    --ayu-success: #7fd962;
    --ayu-warning: #e6b450;
    --ayu-error: #f26d78;
    --ayu-info: #73b8ff;

    /* ayu color palette */
    --ayu-blue-50: #eff8ff;
    --ayu-blue-100: #daeffe;
    --ayu-blue-200: #bee4fd;
    --ayu-blue-300: #91d3fc;
    --ayu-blue-400: #5db8f8;
    --ayu-blue-500: #59c2ff; /* link color */
    --ayu-blue-600: #2483e2;
    --ayu-blue-700: #1b6bcf;
    --ayu-blue-800: #1c58a8;
    --ayu-blue-900: #1d4d85;
    --ayu-blue-950: #162f51;

    --ayu-green-50: #f0fdf1;
    --ayu-green-100: #dcfce0;
    --ayu-green-200: #bbf7c3;
    --ayu-green-300: #86efac;
    --ayu-green-400: #4ade80;
    --ayu-green-500: #7fd962; /* success color */
    --ayu-green-600: #16a34a;
    --ayu-green-700: #15803d;
    --ayu-green-800: #166534;
    --ayu-green-900: #14532d;
    --ayu-green-950: #052e16;

    --ayu-red-50: #fef2f2;
    --ayu-red-100: #fee2e2;
    --ayu-red-200: #fecaca;
    --ayu-red-300: #fca5a5;
    --ayu-red-400: #f87171;
    --ayu-red-500: #f26d78; /* error color */
    --ayu-red-600: #dc2626;
    --ayu-red-700: #b91c1c;
    --ayu-red-800: #991b1b;
    --ayu-red-900: #7f1d1d;
    --ayu-red-950: #450a0a;

    --ayu-purple-50: #faf5ff;
    --ayu-purple-100: #f3e8ff;
    --ayu-purple-200: #e9d5ff;
    --ayu-purple-300: #d8b4fe;
    --ayu-purple-400: #c084fc;
    --ayu-purple-500: #a855f7;
    --ayu-purple-600: #9333ea;
    --ayu-purple-700: #7e22ce;
    --ayu-purple-800: #6b21a8;
    --ayu-purple-900: #581c87;
    --ayu-purple-950: #3b0764;

    --ayu-gray-50: #f9fafb;
    --ayu-gray-100: #f3f4f6;
    --ayu-gray-200: #e5e7eb;
    --ayu-gray-300: #d1d5db;
    --ayu-gray-400: #9ca3af;
    --ayu-gray-500: #6c7380; /* gutter color */
    --ayu-gray-600: #4b5563;
    --ayu-gray-700: #374151;
    --ayu-gray-800: #1f2937;
    --ayu-gray-900: #161a24; /* highlight */
    --ayu-gray-950: #10141c; /* background */
}

.font-300 {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.font-400 {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.font-500 {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.font-600 {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.font-700 {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

body {
    background-color: var(--ayu-bg);
    color: var(--ayu-fg);
    font-family: "Fira Code", monospace;
    font-weight: 400;
    font-style: normal;
}

.bg-ayu-bg {
    background-color: var(--ayu-bg);
}
.bg-ayu-bg-50percent {
    background-color: var(--ayu-bg-50percent);
}
.bg-ayu-highlight {
    background-color: var(--ayu-highlight);
}
.bg-ayu-popup {
    background-color: var(--ayu-popup);
}
.bg-ayu-accent {
    background-color: var(--ayu-accent);
}
.bg-ayu-selection {
    background-color: var(--ayu-selection);
}
.bg-ayu-gutter {
    background-color: var(--ayu-gutter);
}
.bg-ayu-gutter-dim {
    background-color: var(--ayu-gutter-dim);
}

.text-ayu-fg {
    color: var(--ayu-fg);
}
.text-ayu-bg {
    color: var(--ayu-bg);
}
.text-ayu-accent {
    color: var(--ayu-accent);
}
.text-ayu-link {
    color: var(--ayu-link);
}
.text-ayu-gutter {
    color: var(--ayu-gutter);
}
.text-ayu-success {
    color: var(--ayu-success);
}
.text-ayu-warning {
    color: var(--ayu-warning);
}
.text-ayu-error {
    color: var(--ayu-error);
}
.text-ayu-info {
    color: var(--ayu-info);
}

.text-ayu-red-500 {
    color: var(--ayu-red-500);
}
.text-ayu-green-500 {
    color: var(--ayu-green-500);
}
.text-ayu-blue-500 {
    color: var(--ayu-blue-500);
}
.text-ayu-purple-500 {
    color: var(--ayu-purple-500);
}
.text-ayu-gray-500 {
    color: var(--ayu-gray-500);
}

.bg-ayu-red-500 {
    background-color: var(--ayu-red-500);
}
.bg-ayu-green-500 {
    background-color: var(--ayu-green-500);
}
.bg-ayu-blue-500 {
    background-color: var(--ayu-blue-500);
}
.bg-ayu-purple-500 {
    background-color: var(--ayu-purple-500);
}
.bg-ayu-gray-500 {
    background-color: var(--ayu-gray-500);
}

.border-ayu-accent {
    border-color: var(--ayu-accent);
}
.border-ayu-red-500 {
    border-color: var(--ayu-red-500);
}
.border-ayu-green-500 {
    border-color: var(--ayu-green-500);
}
.border-ayu-blue-500 {
    border-color: var(--ayu-blue-500);
}
.border-ayu-purple-500 {
    border-color: var(--ayu-purple-500);
}
.border-ayu-gutter {
    border-color: var(--ayu-gutter);
}
.border-ayu-gutter-dim {
    border-color: var(--ayu-gutter-dim);
}
.border-ayu-selection {
    border-color: var(--ayu-selection);
}

::selection {
    background-color: rgba(
        51,
        136,
        255,
        0.25
    ); /* --ayu-selection with opacity */
    color: var(--ayu-fg);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ayu-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--ayu-gutter);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ayu-accent);
}

.demo-border {
    border: 2px dotted var(--ayu-gutter);
    border-radius: 15px;
    overflow: hidden;
}

.demo-border span {
    display: block;
    background-color: var(--ayu-popup);
    padding: 5px;
    text-align: center;
}

.no-select {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.green {
    color: var(--ayu-green-500);
}

.link-project-page {
    text-decoration: none;
    border-bottom: 1px solid var(--ayu-blue-500);
    color: var(--ayu-blue-500);
    transition:
        color 0.1s,
        border-color 0.1s;
    margin-bottom: 8px;
}
.link-project-page:hover {
    color: var(--ayu-blue-600);
    border-color: var(--ayu-blue-600);
}
