@import url("./fonts.css");

/* General and light mode variables */
:root {
    --header-height: 4rem;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 60px;
    --font-family: Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-logo: "Cleanvertising Light", sans-serif;

    --color-background: oklch(0.95 0.00431 198.471);
    --color-foreground: oklch(0.25 0.00003 271.152);
    --color-overlay: oklch(0 0 0 / 50%);
    --color-card: oklch(1 0 0);
    --color-card-foreground: oklch(0.141 0.005 285.823);
    --color-dialog: oklch(1 0 0);
    --color-dialog-foreground: oklch(0.141 0.005 285.823);
    --color-popover: oklch(1 0 0);
    --color-popover-foreground: oklch(0.141 0.005 285.823);
    --color-tooltip: oklch(0.141 0.005 285.823);
    --color-tooltip-foreground: oklch(1 0 0);
    --color-primary: oklch(0.66 0.12518 249.103);
    --color-primary-foreground: oklch(1 0 0);
    --color-secondary: oklch(0.92 0.004 286.32);
    --color-secondary-foreground: oklch(0.21 0.006 285.885);
    --color-muted: oklch(0.97 0.001 286.375);
    --color-muted-foreground: oklch(0.4 0.016 285.938);
    --color-brand-primary: oklch(34.003% 0.05207 198.891);
    --color-brand-secondary: oklch(0.677 0.17858 247.163);
    --color-header: oklch(0.285 0.02305 235.711);
    --color-header-foreground: oklch(0.985 0 0);
    --color-accent: oklch(0.5 0.05 198.513 / 0.1);
    --color-accent-foreground: oklch(0.21 0.006 285.885);
    --color-info: oklch(0.65 0.11785 248.008);
    --color-success: oklab(0.564 -0.0963 0.07045);
    --color-warning: oklch(0.746 0.16482 65.073);
    --color-destructive: oklch(0.64 0.22 26.022);
    --color-gray: oklch(0.6 0 271.152);
    --color-border: oklch(0.92 0.004 286.32);
    --color-input: oklch(0.97 0.00181 249.224);
    --color-ring: var(--color-primary);
    --moz-scrollbar-color: oklch(0.6 0.00007 271.152 / 0.5) transparent;
}

/* Dark mode variables */
.dark {
    --color-background: oklch(0.21 0.006 285.885);
    --color-foreground: oklch(0.985 0 0);
    --color-overlay: oklch(1 0 0 / 15%);
    --color-card: oklch(0.167 0.00208 286.046);
    --color-card-foreground: oklch(0.985 0 0);
    --color-dialog: oklch(0.19 0.006 285.885);
    --color-dialog-foreground: oklch(0.985 0 0);
    --color-popover: oklch(0.21 0.006 285.885);
    --color-popover-foreground: oklch(0.985 0 0);
    --color-tooltip: oklch(0.3 0.005 285.823);
    --color-tooltip-foreground: oklch(1 0 0);
    --color-primary: oklch(0.6 0.12518 249.103);
    --color-primary-foreground: oklch(1 0 0);
    --color-secondary: oklch(0.274 0.006 286.033);
    --color-secondary-foreground: oklch(0.985 0 0);
    --color-brand-primary: oklch(0.815 0.10286 198.513);
    --color-brand-secondary: oklch(0.677 0.17858 247.163);
    --color-header: oklch(0.235 0.02305 235.711);
    --color-header-foreground: oklch(0.985 0 0);
    --color-muted: oklch(0.25 0.006 286.033);
    --color-muted-foreground: oklch(0.705 0.015 286.067);
    --color-accent: color-mix(in srgb, var(--color-brand-primary), transparent 90%);
    --color-accent-foreground: oklch(0.985 0 0);
    --color-info: oklch(0.615 0.12682 249.464);
    --color-success: oklch(0.515 0.10592 143.861);
    --color-warning: oklch(0.655 0.13082 69.512);
    --color-destructive: oklch(0.705 0.258 29.234);
    --color-gray: oklch(0.51 0 271.152);
    --color-border: oklch(1 0 0 / 10%);
    --color-input: oklch(1 0 0 / 5%);
    --color-ring: var(--color-primary);
    --moz-scrollbar-color: oklch(0.42 0.00005 271.152 / 0.5) transparent;
}

/* Reset styles */
@layer reset {
    *,
    *::after,
    *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: oklch(0 0 0 / 0);
        -webkit-tap-highlight-color: transparent;
    }

    menu,
    ol,
    ul {
        list-style: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }

    a {
        color: inherit;
        text-decoration: inherit;
    }
}

/* Base styles */
@layer base {
    :root {
        line-height: 1.5;
        font-weight: 400;

        background-color: var(--color-background);
        color: var(--color-foreground);

        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    * {
        font-family: var(--font-family);
    }

    html,
    body {
        height: 100%;
        width: 100%;
        max-height: 100vh;
        max-width: 100vw;
        overflow: auto;
    }

    button {
        cursor: pointer;

        &:disabled {
            cursor: not-allowed;
        }
    }

    #app {
        min-height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: auto;
    }

    /* Focusable elements */
    :where(button, a, input, textarea, select, [tabindex]):not([tabindex="-1"]) {
        transition: all 0.125s ease-in-out;

        &:focus-visible {
            outline: none;
            border-color: var(--color-ring);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ring), transparent 50%);
        }
    }

    /* Scrollbar style */
    * {
        scrollbar-color: var(--t-moz-scrollbar-color);
    }

    /* Utilities */
    .hidden {
        display: none !important;
    }
}

@layer components {
    /* Alert */
    .alert {
        position: relative;
        width: 100%;
        padding: 1rem;
        border-radius: 0.25rem;
        font-size: 0.9rem;
        font-weight: 500;
        border-left: 3px solid currentColor;
        fill: currentColor;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 1rem;

        &.alert-info {
            background-color: hsl(200, 90%, 90%);
            color: hsl(208, 90%, 46%);
        }

        &.alert-danger {
            background-color: hsl(356, 90%, 90%);
            color: hsl(346, 90%, 46%);
        }

        &.alert-success {
            background-color: hsl(128, 90%, 85%);
            color: hsl(130, 90%, 33%);
        }

        &.alert-warning {
            background-color: hsl(49, 90%, 85%);
            color: hsl(30, 90%, 43%);
        }

        .alert-icon {
            height: 2rem;
            width: 2rem;
            padding: 0.125rem;
            background-color: currentColor;
        }

        .alert-contents {
            display: flex;
            flex-direction: column;
            color: black;
        }
    }

    /* Button */
    .btn {
        height: 3rem;
        width: 100%;
        background-color: var(--color-secondary);
        color: var(--color-secondary-foreground);
        border: none;
        border-radius: calc(Infinity * 1px);
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: background-color 0.05s ease-in-out opacity 0.05s ease-in-out;

        &:disabled,
        &.btn-disabled {
            opacity: 0.75;
            cursor: not-allowed;
        }

        &:hover:not(:disabled):not(.btn-disabled) {
            background-color: color-mix( in srgb, var(--color-secondary), var(--color-foreground) 5% );
        }

        &.btn-primary {
            background-color: var(--color-primary);
            color: var(--color-primary-foreground);

            &:hover:not(:disabled):not(.btn-disabled) {
                background-color: color-mix( in srgb, var(--color-primary), var(--color-foreground) 5% );
            }
        }

        &.btn-danger {
            background-color: var(--color-destructive);
            color: white;

            &:hover:not(:disabled):not(.btn-disabled) {
                background-color: color-mix( in srgb, var(--color-destructive), var(--color-foreground) 5% );
            }
        }

        &.btn-success {
            background-color: var(--color-success);
            color: var(--color-primary-foreground);

            &:hover:not(:disabled):not(.btn-disabled) {
                background-color: color-mix( in srgb, var(--color-success), var(--color-foreground) 5% );
            }
        }

        &.btn-spinner-visible {
            .svg-icon[data-icon="spinner"] {
                display: block;
            }

            > *:not(.svg-icon[data-icon="spinner"]) {
                display: none;
            }
        }

        .svg-icon[data-icon="spinner"] {
            display: none;
        }
    }

    /* Card */
    .card {
        margin: 1rem;
        width: 100%;
        max-width: 480px;
        padding: 2rem;
        background-color: var(--color-card);
        color: var(--color-card-foreground);
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        gap: 0 3rem;

        &.card-fullscreen {
            min-height: 100vh;
            max-width: 100%;
            margin: 0;
            border-radius: 0;
        }

        &.card-landscape {
            @media (min-width: 720px) and (orientation: landscape) {
                flex-direction: row;
                max-width: 1024px;
            }

            @media (max-width: 1240px) and (max-height: 840px) {
                min-height: 100vh;
                max-width: 100%;
                margin: 0;
                border-radius: 0;
            }
        }

        @media (max-width: 1240px) {
            margin: 1rem 5rem;
        }

        @media (max-width: 600px) {
            min-height: 100vh;
            max-width: 100%;
            margin: 0;
            border-radius: 0;
        }

        @media (max-width: 480px) {
            padding: 2rem 1rem;
        }

        .card-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            &:not(&.brand) {
                margin-top: 4rem;
            }

            &.brand {
                .lead {
                    margin-top: 0.5rem;
                    font-size: 2.5rem;
                    font-weight: 600;
                    line-height: 1;
                    opacity: 0.9;
                }

                p {
                    font-size: 1.125rem;
                }
            }
        }
    }

    /* Form controls */
    .form {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .form-input {
            --input-height: 3rem;
            position: relative;
            display: flex;
            flex-direction: column;

            &.form-input-icon {
                input {
                    padding-left: var(--input-height);
                }
            }

            .svg-icon {
                --img-height: 1.25rem;
                position: absolute;
                bottom: calc(var(--input-height) / 2 - var(--img-height) / 2);
                left: calc(var(--input-height) / 2 - var(--img-height) / 2);
                height: var(--img-height);
                width: var(--img-height);
                background-color: var(--color-primary);
            }

            label {
                font-size: 0.9rem;
                font-weight: 600;
            }

            input {
                height: var(--input-height);
                width: 100%;
                margin-top: 0.25rem;
                padding: 0 1rem;
                font-size: 1rem;
                background-color: var(--color-input);
                color: var(--color-foreground);
                border: none;
                border-top: 3px solid transparent;
                border-bottom: 3px solid transparent;
                border-radius: 0.25rem;
                outline: none;
                box-shadow: none;
                transition-property: background-color, border;
                transition-duration: 150ms;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

                &[type="number"] {
                    appearance: none;
                    -moz-appearance: textfield;

                    &::-webkit-outer-spin-button,
                    &::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }
                }

                &:disabled {
                    opacity: 0.75;
                }

                &:focus {
                    border-top: 3px solid transparent;
                    border-bottom: 3px solid var(--color-primary);
                }

                &:hover:not(:focus):not(:disabled) {
                    background-color: color-mix(
                        in srgb,
                        var(--color-input),
                        var(--color-foreground) 2.5%
                    );
                }
            }
        }

        .form-checkbox {
            font-size: 0.9rem;
            display: flex;
            gap: 0.5rem;

            input {
                width: 1rem;
            }
        }

        .form-btns {
            margin-top: 3rem;
        }
    }

    /* Input Checkbox */
    input[type="checkbox"] {
        accent-color: var(--color-primary);
    }

    /* SVG Icons */
    .svg-icon {
        height: 1rem;
        width: 1rem;
        background-color: currentColor;
        flex-shrink: 0;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;

        &[data-icon="arrow-left-solid"] {
            mask-image: url(/svg/arrow-left-solid.svg);
        }
        &[data-icon="circle-check-solid"] {
            mask-image: url(/svg/circle-check-solid.svg);
        }
        &[data-icon="circle-info-solid"] {
            mask-image: url(/svg/circle-info-solid.svg);
        }
        &[data-icon="envelope-solid"] {
            mask-image: url(/svg/envelope-solid.svg);
        }
        &[data-icon="hashtag-solid"] {
            mask-image: url(/svg/hashtag-solid.svg);
        }
        &[data-icon="key-solid"] {
            mask-image: url(/svg/key-solid.svg);
        }
        &[data-icon="spinner"] {
            mask-image: url(/svg/spinner.svg);
        }
        &[data-icon="triangle-exclamation-solid"] {
            mask-image: url(/svg/triangle-exclamation-solid.svg);
        }
        &[data-icon="user-solid"] {
            mask-image: url(/svg/user-solid.svg);
        }
    }
}