@import "tailwindcss";

@plugin "daisyui" {
    themes: mountainridge --default;
    darkTheme: mountainridge;
    base: true;
    styled: true;
    utils: true;
    logs: false;
}

@plugin "daisyui/theme" {
    name: "mountainridge";
    default: true;
    prefersdark: true;
    color-scheme: "dark";
    font-family: "Geist", system-ui, sans-serif;
    /* Backgrounds — charcoal scale */
    --color-base-100: oklch(16% 0.02 214);
    --color-base-200: oklch(13% 0.02 214);
    --color-base-300: oklch(10% 0.02 214);
    --color-base-content: oklch(92% 0.005 214);

    /* Primary — sea-grass green rgb(88, 191, 177) */
    --color-primary: oklch(72% 0.097 183);
    --color-primary-content: oklch(13% 0.02 214);

    /* Secondary — glacier light blue rgb(94, 150, 159) */
    --color-secondary: oklch(60% 0.055 205);
    --color-secondary-content: oklch(13% 0.02 214);

    /* Accent — flamingo pink rgba(253, 117, 127) */
    --color-accent: oklch(72% 0.155 14);     /* flamingo pink */
    --color-accent-content: oklch(13% 0.02 214);

    /* Neutral — charcoal slate */
    --color-neutral: oklch(28% 0.02 214);
    --color-neutral-content: oklch(80% 0.01 214);

    /* Semantic */
    --color-info: oklch(60% 0.055 205);
    --color-info-content: oklch(13% 0.02 214);
    --color-success: oklch(72% 0.097 183);
    --color-success-content: oklch(13% 0.02 214);
    --color-warning: oklch(68% 0.16 42);    /* alpenglow orange */
    --color-warning-content: oklch(13% 0.02 214);
    --color-error: oklch(72% 0.155 14);      /* flamingo pink */
    --color-error-content: oklch(13% 0.02 214);

    /* Shape */
    --radius-selector: 1.5rem;
    --radius-field: 0.48rem;
    --radius-box: 0.48rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

:root {
    all: inherit;
    color: var(--color-base-content); /* DaisyUI's base text color */
    font-family: 'Geist', Sans, serif;

    /* creating the perfect shadow according to twitter/X
    - https://codepen.io/jh3y/pen/yLWgjpd
    - https://x.com/jh3yy/status/1796208073830232574
    */
    --tint: 214;
    --alpha: 4;
    --base: hsl(var(--tint, 214) 80% 27% / calc(var(--alpha, 4) * 1%));
    --shade: hsl(from var(--base) calc(h + 8) 25 calc(l - 5));


    --perfect-shadow: 0 0 0 1px var(--base),
    0 1px 1px -0.5px var(--shade),
    0 3px 3px -1.5px var(--shade),
    0 6px 6px -3px var(--shade),
    0 12px 12px -6px var(--base),
    0 24px 24px -12px var(--base);


    --shade-active: hsla(173, 41%, 53%, 0.66);
    --base-active: hsl(var(--tint, 214) 80% 27% / calc(var(--alpha, 4) * 1%));

    --perfect-shadow-active: 0 0 0 1px var(--base-active),
    0 1px 1px -0.5px var(--shade-active),
    0 3px 3px -1.5px var(--shade-active),
    0 6px 6px -3px var(--shade-active),
    0 12px 12px -6px var(--base-active),
    0 24px 24px -12px var(--base-active);

    --perfect-shadow-thin-active: 0 0 0 1px var(--base-active),
    0 1px 2px -0.5px var(--shade-active),
    0 2px 4px -1px var(--shade-active),
    0 4px 8px -2px var(--shade-active);

    --shade-active-warn: rgba(253, 117, 127, 0.66);
    --perfect-shadow-warn: 0 0 0 1px var(--shade-active-warn),
    0 1px 1px -0.5px var(--shade-active-warn),
    0 3px 3px -1.5px var(--shade-active-warn),
    0 6px 6px -3px var(--shade-active-warn),
    0 12px 12px -6px var(--base-active),
    0 24px 24px -12px var(--base-active);


    --base-thin: hsl(var(--tint, 214) 80% 27% / calc(var(--alpha, 4) * 1%));
    --shade-thin: hsl(from var(--base-thin) calc(h + 8) 25 calc(l - 5));

    --perfect-shadow-thin: 0 0 0 1px var(--base-thin),
    0 1px 2px -0.5px var(--shade-thin),
    0 3px 6px -1px var(--shade-thin);


    --perfect-shadow-light: 0px 6px 20px -4px rgba(0, 0, 0, 0.40), 0px 0px 30px -8px rgba(123, 94, 248, 0.10);


    /* === DARK BACKGROUND SHADOWS === */

    /* Tinted with glacier blue for atmosphere */
    --tint-dark: 205;
    --alpha-dark: 30;

    --base-dark: hsl(var(--tint-dark) 60% 60% / calc(var(--alpha-dark) * 1%));
    --shade-dark: hsl(from var(--base-dark) calc(h + 8) 70 calc(l + 10));

    /* Full shadow — for cards, modals, elevated surfaces */
    --perfect-shadow-dark: 0 0 0 1px hsl(205 40% 50% / 15%),
    0 1px 1px -0.5px var(--base-dark),
    0 3px 3px -1.5px var(--base-dark),
    0 6px 6px -3px var(--shade-dark),
    0 12px 12px -6px var(--shade-dark),
    0 24px 24px -12px var(--base-dark);

    /* Thin shadow — for buttons, inputs, small elements */
    --perfect-shadow-thin-dark: 0 0 0 1px hsl(205 40% 50% / 12%),
    0 1px 2px -0.5px var(--base-dark),
    0 3px 6px -1px var(--shade-dark);

    /* Active/focus state — sea-grass green glow */
    --shade-active-dark: hsla(183, 35%, 55%, 0.45); /* sea-grass green */

    --perfect-shadow-thin-active-dark: 0 0 0 1px hsla(183, 35%, 55%, 0.3),
    0 1px 2px -0.5px var(--shade-active-dark),
    0 2px 4px -1px var(--shade-active-dark),
    0 4px 8px -2px var(--shade-active-dark);

    /* Warning/error active state — flamingo pink glow */
    --shade-active-warn-dark: rgba(253, 117, 127, 0.45);

    --perfect-shadow-warn-dark: 0 0 0 1px rgba(253, 117, 127, 0.3),
    0 1px 1px -0.5px var(--shade-active-warn-dark),
    0 3px 3px -1.5px var(--shade-active-warn-dark),
    0 6px 6px -3px var(--shade-active-warn-dark),
    0 12px 12px -6px var(--shade-active-warn-dark);


    --mountain-white-dark: rgb(245, 242, 242); /* ≈ 80% – popular "dark mode off-white" */
    --mountain-white: rgb(255, 252, 252, 1);
    --ghost-white: rgb(248, 248, 255, 1);

    /* Very subtle darkening – still very bright */
    --mountain-white-darker-1: rgb(245, 242, 242); /* ≈ 96% brightness */
    --mountain-white-darker-2: rgb(235, 232, 232); /* ≈ 92% */

    /* Noticeably darker but still clearly a very light / "off-white" */
    --mountain-white-darker-3: rgb(230, 227, 227); /* ≈ 90% */
    --mountain-white-darker-4: rgb(220, 217, 217); /* ≈ 86% */
    --mountain-white-darker-5: rgb(204, 201, 201); /* ≈ 80% – popular "dark mode off-white" */

    /* Deeper / moodier off-whites – start feeling more greyish */
    --mountain-white-darker-6: rgb(189, 186, 186); /* ≈ 74% */
    --mountain-white-darker-7: rgb(170, 167, 167); /* ≈ 67% – quite smoky now */
    --mountain-white-darker-8: rgb(150, 147, 147); /* ≈ 59% – very muted/dark off-white */

    --charcoal-deep: rgb(15, 20, 25);
    --charcoal-dark: rgb(25, 30, 35); /* +10 */
    --charcoal-medium: rgb(35, 40, 48); /* +20ish */
    --charcoal-soft: rgb(45, 50, 58); /* noticeably lighter but still moody */
    --charcoal-slate: rgb(55, 60, 68); /* good background / surface color */
    --charcoal-lighter: rgb(70, 75, 85); /* readable dark gray, modern UI feel */
    --deep-night-black: rgb(8, 18, 28);
    --abyss-black: rgb(6, 15, 22);


    --bs-dark: var(--charcoal-medium); /* changes the base dark color */
    --bs-dark-rgb: 35, 40, 48;
    --bs-blue: var(--glacier-blue);

    /* custom colors */
    --flamingo-pink: rgba(253, 117, 127, 1);
    --sea-grass-green: rgba(88, 191, 177, 1);

    --mountain-darkgray: rgb(12, 31, 49, 1);
    --mountain-gray: rgb(102, 133, 139, 1);
    --mountain-lightgray: rgb(121, 152, 155, 1);

    --glacier-blue: rgb(28, 80, 101);
    --glacier-darkblue: rgb(12, 39, 49);
    --glacier-lightblue: rgb(94, 150, 159);
    --glacier-blue-rgb: 94, 150, 159;

    /* borders, corners, and shadows */
    --perfect-border-radius: 0.48em;
    --backdrop-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.19);
    --backdrop-transition: all 0.3s ease;

    /* global overwrites of bootstrap vars */
    --text-bg-primary-badge-color: var(--glacier-blue);

    /* White to Darker Blue diagonal gradient */
    --gradient-white-dark-blue: linear-gradient(
            142deg,
            var(--ghost-white) 0%,
            var(--ghost-white) 55%,
            var(--glacier-lightblue) 67%,
            var(--glacier-lightblue) 75%,
            var(--glacier-blue) 100%
    );

    --gradient-dark: linear-gradient(135deg, var(--mountain-white) 0%, var(--mountain-darkgray) 100%);

}

* {
    scrollbar-width: none;

}

h1, h2, h3 {
    font-weight: 300;
}

h4, h5, h6, p, body {
    font-weight: 400;
}

.btn {
    box-shadow: var(--perfect-shadow-thin-dark);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: var(--perfect-shadow-thin-active-dark);
}

.btn:not(.btn-ghost):not(.btn-outline):hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: var(--perfect-shadow-thin-active-dark);
}