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

:root {
    --font-main: "Crimson Pro", "EB Garamond", Georgia, "Times New Roman", Times, serif;
}

.main-font {
    font-family: var(--font-main), serif;
}
.main-font a,
.main-font label,
.main-font button {
    font-family: var(--font-main), serif;
}

.logo {
    font-family: var(--font-main), serif;
}

@layer base {
    body {
        font-family: var(--font-main), serif;
    }

    button, input, label {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }

    html {
        -webkit-tap-highlight-color: transparent;
    }

    :root {
        /* Text / Ink Grey Scale */
        --color-ink-0: 255 255 255; /* white */
        --color-ink-50: 245 245 245;
        --color-ink-100: 230 230 230;
        --color-ink-200: 200 200 200;
        --color-ink-300: 170 170 170;
        --color-ink-400: 140 140 140;
        --color-ink-500: 110 110 110;
        --color-ink-600: 85 85 85;
        --color-ink-700: 60 60 60;
        --color-ink-800: 40 40 40;
        --color-ink-900: 25 25 25;
        --color-ink-950: 12 12 12;
        --color-ink-1000: 0 0 0; /* black */

        /* Background / Canvas Grey Scale */
        --color-canvas-0: 255 255 255; /* white */
        --color-canvas-25: 245 245 245;
        --color-canvas-50: 245 245 245;
        --color-canvas-100: 245 245 245;
        --color-canvas-200: 210 210 210;
        --color-canvas-300: 190 190 190;
        --color-canvas-400: 160 160 160;
        --color-canvas-500: 130 130 130;
        --color-canvas-600: 100 100 100;
        --color-canvas-700: 75 75 75;
        --color-canvas-800: 50 50 50;
        --color-canvas-900: 30 30 30;
        --color-canvas-950: 15 15 15;
        --color-canvas-1000: 0 0 0; /* black */

        --color-primary-950: 23 37 84; /* very dark navy */
        --color-primary-900: 30 58 138;
        --color-primary-800: 30 64 175;
        --color-primary-700: 29 78 216;
        --color-primary-600: 37 99 235;
        --color-primary-500: 59 130 246; /* standard blue */
        --color-primary-400: 96 165 250;
        --color-primary-300: 147 197 253;
        --color-primary-200: 191 219 254;
        --color-primary-100: 219 234 254;
        --color-primary-50: 239 246 255; /* very light blue */

        --color-yes-0: 255 255 255;
        --color-yes-50: 249 249 249;
        --color-yes-100: 242 242 242;
        --color-yes-200: 217 217 217;
        --color-yes-300: 191 191 191;
        --color-yes-400: 166 166 166;
        --color-yes-500: 140 140 140;
        --color-yes-600: 115 115 115;
        --color-yes-700: 89 89 89;
        --color-yes-800: 64 64 64;
        --color-yes-900: 34 34 34;
        --color-yes-950: 17 17 17;
        --color-yes-1000: 0 0 0;

        --color-no-0: 255 255 255;
        --color-no-50: 249 249 249;
        --color-no-100: 242 242 242;
        --color-no-200: 217 217 217;
        --color-no-300: 191 191 191;
        --color-no-400: 166 166 166;
        --color-no-500: 140 140 140;
        --color-no-600: 115 115 115;
        --color-no-700: 89 89 89;
        --color-no-800: 64 64 64;
        --color-no-900: 34 34 34;
        --color-no-950: 17 17 17;
        --color-no-1000: 0 0 0;

    }

    .dark {
        color-scheme: dark;

        --color-ink-1000: 255 255 255; /* white */
        --color-ink-950: 250 250 250; /* #FAFAFA */
        --color-ink-900: 242 242 242; /* #F2F2F2 */
        --color-ink-800: 217 217 217; /* #D9D9D9 */
        --color-ink-700: 191 191 191; /* #BFBFBF */
        --color-ink-600: 166 166 166; /* #A6A6A6 */
        --color-ink-500: 140 140 140; /* #8C8C8C */
        --color-ink-400: 115 115 115; /* #737373 */
        --color-ink-300: 89 89 89; /* #595959 */
        --color-ink-200: 64 64 64; /* #404040 */
        --color-ink-100: 34 34 34; /* #222222 */
        --color-ink-50: 17 17 17; /* #111111 */
        --color-ink-0: 0 0 0; /* black */

        --color-canvas-25: 0 0 0;
        --color-canvas-0: 20 20 20;
        --color-canvas-50: 20 20 20;
        --color-canvas-100: 40 40 40;
        --color-canvas-200: 60 60 60;
        --color-canvas-300: 90 90 90;

        --color-primary-950: 255 255 255;
        --color-primary-900: 255 255 255;
        --color-primary-800: 255 255 255;
        --color-primary-700: 255 255 255;
        --color-primary-600: 96 165 250;
        --color-primary-500: 59 130 246; /* standard blue */
        --color-primary-400: 37 99 235;
        --color-primary-300: 29 78 216;
        --color-primary-200: 30 64 175;
        --color-primary-100: 30 58 138;
        --color-primary-50: 23 37 84; /* very dark navy */


        --color-no-950: 255 255 255; /* white */
        --color-no-900: 242 242 242;
        --color-no-800: 217 217 217;
        --color-no-700: 191 191 191;
        --color-no-600: 166 166 166;
        --color-no-500: 140 140 140;
        --color-no-400: 115 115 115;
        --color-no-300: 89 89 89;
        --color-no-200: 64 64 64;
        --color-no-100: 34 34 34;
        --color-no-50: 17 17 17;
        --color-no-0: 0 0 0; /* black */


        --color-yes-950: 255 255 255; /* white */
        --color-yes-900: 242 242 242;
        --color-yes-800: 217 217 217;
        --color-yes-700: 191 191 191;
        --color-yes-600: 166 166 166;
        --color-yes-500: 140 140 140;
        --color-yes-400: 115 115 115;
        --color-yes-300: 89 89 89;
        --color-yes-200: 64 64 64;
        --color-yes-100: 34 34 34;
        --color-yes-50: 17 17 17;
        --color-yes-0: 0 0 0; /* black */

    }
}

@font-face {
    font-family: 'emoji';
    src: local('AppleColorEmoji'), local('Segoe UI Emoji'), local('Noto Color Emoji');
    /* from official unicode range for emoji: https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5B%3AEmoji%3DYes%3A%5D%0D%0A&abb=on&esc=on&g=&i= */
    /* but include zero width joiner and variant block selector, like 🏳️‍🌈 */
    unicode-range: U+200D, U+FE0?, U+203C, U+2049, U+2122, U+2139, U+2194-2199,
    U+21A9, U+21AA, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA,
    U+24C2, U+25AA, U+25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E,
    U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626,
    U+262A, U+262E, U+262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F,
    U+2660, U+2663, U+2665, U+2666, U+2668, U+267B, U+267E, U+267F, U+2692-2697,
    U+2699, U+269B, U+269C, U+26A0, U+26A1, U+26A7, U+26AA, U+26AB, U+26B0,
    U+26B1, U+26BD, U+26BE, U+26C4, U+26C5, U+26C8, U+26CE, U+26CF, U+26D1,
    U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702,
    U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728,
    U+2733, U+2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763,
    U+2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934, U+2935, U+2B05-2B07,
    U+2B1B, U+2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+1F004,
    U+1F0CF, U+1F170, U+1F171, U+1F17E, U+1F17F, U+1F18E, U+1F191-1F19A,
    U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250,
    U+1F251, U+1F300-1F321, U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B,
    U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E,
    U+1F550-1F567, U+1F56F, U+1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D,
    U+1F590, U+1F595, U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2,
    U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3,
    U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2,
    U+1F6D5-1F6D7, U+1F6DC-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0,
    U+1F6F3-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945,
    U+1F947-1F9FF, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5,
    U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8;
}

@font-face {
    font-family: 'icomoon';
    src: url('../public/fonts/icomoon.eot?v49ui9#iefix') format('embedded-opentype'),
    url('../public/fonts/icomoon.ttf?v49ui9') format('truetype'),
    url('../public/fonts/icomoon.woff?v49ui9') format('woff'),
    url('../public/fonts/icomoon.svg?v49ui9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+1E40;
}

[class^='icon-'],
[class*=' icon-'] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mana_3:before {
    content: '\1e40';
}

/* For Webkit-inkd browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

text {
    font-family: icomoon, var(--font-main), emoji, sans-serif;
}

/* Style all headings globally */
h1, h2, h3, h4, h5, h6 {
    /*font-family: 'Inter', sans-serif; !* Clean modern font *!*/
    font-weight: 600; /* Semi-bold for clarity */
    /*color: #111827;                   !* Near-black text for readability *!*/
    line-height: 1.25;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Size scaling */
h1 {
    font-size: 2rem; /* ~32px */
}

h2 {
    font-size: 1.5rem; /* ~24px */
}

h3 {
    font-size: 1.25rem; /* ~20px */
}

h4 {
    font-size: 1.125rem; /* ~18px */
}

h5 {
    font-size: 1rem; /* ~16px */
}

h6 {
    font-size: 0.875rem; /* ~14px */
    color: #374151; /* Slightly lighter for subheadings */
}

ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
}
.customlink a,
.customlink button{
    color: rgb(var(--color-primary-500));
    text-decoration: none;
    font-family: var(--font-main), serif;
}

.dark .customlink a,
.dark .customlink button {
    color: rgb(var(--color-primary-600));
    text-decoration: none;
    font-family: var(--font-main), serif;
}

.customlink a:hover,
.customlink button:hover {
    text-decoration: underline;
}

.dark .customlink a:hover,
.dark .customlink button:hover {
    text-decoration: underline;
}

.sidebar-nav {
    font-family: var(--font-main), serif;
}

.body-bg {
    background-color: rgb(var(--color-canvas-0));
}

/* Restore normal ol numbers and ensure they are visible */
ol {
    list-style-position: inside; /* or 'inside' if you prefer */
    /*margin: 0 0 1rem 0;*/
    list-style: decimal;
    padding-left: 0.5rem;     /* space for numbers */
}

/* Ensure li behaves as a list item (some resets or flex can break markers) */
ol > li {
    display: list-item;           /* prevents flex from removing marker layout */
    /*padding-left: 0rem;   !* extra spacing after number *!*/
    /*text-indent: -0rem;   !* pull first line back so text aligns *!*/
}

/* Style the marker (modern browsers) */
ol > li::marker {
    font-weight: 600;
    font-size: 1em;
    color: #374151;               /* pick a visible color */
}