/*! Copyright Steph Ango, stephango.com
    Flexoki (MIT License), github.com/kepano/flexoki
*/

/* --- BASE VARIABLES --- */
:root {
    --font-content: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", monospace;
    --border-radius: 4px;
    --image-radius: 6px;
    --line-height: 1.5;

    --flexoki-black: #100F0F;
    --flexoki-paper: #FFFCF0;
    --flexoki-50: #F2F0E5;
    --flexoki-100: #E6E4D9;
    --flexoki-150: #DAD8CE;
    --flexoki-200: #CECDC3;
    --flexoki-300: #B7B5AC;
    --flexoki-400: #9F9D96;
    --flexoki-500: #878580;
    --flexoki-600: #6F6E69;
    --flexoki-700: #575653;
    --flexoki-800: #403E3C;
    --flexoki-850: #343331;
    --flexoki-900: #282726;
    --flexoki-950: #1C1B1A;

    /* Accents */
    --flexoki-red-400: #D14D41;
    --flexoki-red-600: #AF3029;
    --flexoki-blue-400: #4385BE;
    --flexoki-blue-600: #205EA6;
    --flexoki-cyan-400: #3AA99F;
    --flexoki-cyan-600: #24837B;
}

/* --- LIGHT MODE --- */
:root, .theme-light {
    --color-bg-primary: var(--flexoki-paper);
    --color-bg-secondary: var(--flexoki-50);
    --color-tx-normal: var(--flexoki-black);
    --color-tx-muted: var(--flexoki-600);
    --color-tx-faint: var(--flexoki-300);
    --color-ui-normal: var(--flexoki-100);
    --color-ui-hover: var(--flexoki-150);
    --color-action: var(--flexoki-blue-600);
    --color-selection: rgba(187,220,206,0.3);
}

/* --- DARK MODE --- */
.theme-dark {
    --color-bg-primary: var(--flexoki-black);
    --color-bg-secondary: var(--flexoki-950);
    --color-tx-normal: var(--flexoki-200);
    --color-tx-muted: var(--flexoki-500);
    --color-tx-faint: var(--flexoki-700);
    --color-ui-normal: var(--flexoki-900);
    --color-ui-hover: var(--flexoki-850);
    --color-action: var(--flexoki-cyan-400);
    --color-selection: rgba(30,95,91,0.3);
}

/* --- GLOBAL STYLES --- */
html { box-sizing: border-box; font-size: 62.5%; }
*, *:before, *:after { box-sizing: inherit; }

body {
    background-color: var(--color-bg-primary);
    color: var(--color-tx-normal);
    font-family: var(--font-content);
    font-size: 1.8rem;
    font-size: calc(1.5rem + .25vw);
    line-height: var(--line-height);
    margin: 0;
    padding: 2rem 0;
    transition: background-color 0.2s, color 0.2s;
}

article {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Wider reading journal grid (books shelf) — avoids fighting page-local max-width */
article.books-shelf {
    max-width: min(100%, 96rem);
}

h1 { font-size: 2em; margin-top: 1.5em; font-weight: 500; }
a { color: var(--color-tx-normal); text-decoration: underline; }
a:hover { color: var(--color-action); }

code {
    font-family: var(--font-mono);
    background: var(--color-bg-secondary);
    padding: .2em .4em;
    border-radius: 4px;
    font-size: 85%;
}

/* --- THE TOGGLE BUTTON FIX --- */
#theme-toggle {
    all: unset;
    display: block;
    position: relative;
    width: 36px;
    height: 20px;
    cursor: pointer;
    float: right;
    margin-right: 2rem;
}

.theme-toggle-slide {
    height: 20px;
    border: 1px solid var(--color-ui-normal);
    border-radius: 24px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.theme-toggle-switch {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background-color: var(--color-tx-muted);
    transition: left .1s linear;
    -webkit-mask-size: 18px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.theme-dark .theme-toggle-switch {
    left: 16px;
    background-color: var(--color-tx-normal);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z' /%3E%3C/svg%3E");
}