/*设计令牌*/

/*基础配色*/
:root {
    /*grayscale*/
    --gray-5: hsl(45deg, 4%, 5%);
    --gray-8: hsl(45deg, 4%, 8%);
    --gray-10: hsl(45deg, 4%, 10%);
    --gray-20: hsl(45deg, 4%, 20%);
    --gray-40: hsl(45deg, 4%, 40%);
    --gray-60: hsl(45deg, 4%, 60%);
    --gray-80: hsl(45deg, 4%, 80%);
    --gray-90: hsl(45deg, 4%, 90%);
    --gray-95: hsl(45deg, 4%, 95%);
    --gray-98: hsl(45deg, 4%, 98%);
    --gray-100: hsl(45deg, 4%, 100%);

    /*colorscale*/
    --violet-58: hsl(258deg, 60%, 58%);
    --violet-68: hsl(258deg, 60%, 68%);
    --lime-32: hsl(76deg, 100%, 32%);
    --lime-42: hsl(76deg, 100%, 42%);
    --cream-85: hsl(60deg, 100%, 85%);
    --cream-91: hsl(60deg, 100%, 91%);
    --khaki-70: hsl(45deg, 30%, 70%);

    /*colorlayer*/
    --khaki-70-a25: hsla(45deg, 30%, 70%, 25%);
    --violet-68-a50: hsla(258deg, 60%, 68%, 50%);
    --lime-32-a50: hsla(76deg, 100%, 32%, 50%);
}

/*基础间距*/
:root {
    /*spacescale 16px*/
    --space-3-8: 0.375rem; /* 6px */
    --space-1-2: 0.5rem; /* 8px */
    --space-3-4: 0.75rem; /* 12px */
    --space-1: 1rem; /* 16px */
    --space-9-8: 1.125rem; /* 18px */
    --space-3-2: 1.5rem; /* 24px */
    --space-9-4: 2.25rem; /* 36px */
    --space-3: 3rem; /* 48px */
    --space-9-2: 4.5rem; /* 72px */
    --space-6: 6rem; /* 96px */

    /*gapscale 6px*/
    --gap-1: var(--space-3-8);
    --gap-4-3: var(--space-1-2);
    --gap-2: var(--space-3-4);
    --gap-8-3: var(--space-1);
    --gap-3: var(--space-9-8);
    --gap-4: var(--space-3-2);
    --gap-6: var(--space-9-4);
    --gap-8: var(--space-3);
    --gap-12: var(--space-9-2);
    --gap-16: var(--space-6);

    /*boxscale 16px*/
    --box-2: 2rem; /* 32px */
    --box-3: 3rem; /* 48px */
    --box-5: 5rem; /* 80px */
    --box-10: 10rem; /* 160px */
    --box-12: 12rem; /* 192px */
    --box-20: 20rem; /* 320px */
    --box-40: 40rem; /* 640px */
    --box-48: 48rem; /* 768px */
    --box-64: 64rem; /* 1024px */
    --box-80: 80rem; /* 1280px */

    /*readwidth 1ch*/
    --read-width: 65ch; /* 65glyphs */
}

/*基础变形*/
:root {
    /*linescale*/
    --line-1-s: 1px solid;
    --line-2-s: 2px solid;
    --line-3-s: 3px solid;
    --line-1-w: 1px wavy;
    --line-1-d: 1px dashed;

    /*radiusscale*/
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-gap: var(--gap-1);
    --radius-semispace: var(--space-1-2);

    /*blurscale*/
    --blur-10: blur(10px);
    --blur-20: blur(20px);

    /*shadowscale*/
    --shadow: 0 2px 8px hsla(0deg, 0%, 0%, 0.08);
    --shadow-light: 0 4px 12px hsla(0deg, 0%, 0%, 0.12);
    --shadow-focus: 0 0 0 3px hsla(258deg, 60%, 68%, 0.1);

    /*transition*/
    --transition: 0.2s ease;
    --transition-all: all var(--transition);
    --transition-color: color var(--transition);
    --transition-opacity: opacity var(--transition);
}

/*基础字体*/
:root {
    /*font family*/
    --font-f-base: "LXGW WenKai", serif;
    --font-f-head: "Source Han Serif SC", serif;
    --font-f-code: "Zed Mono", "LXGW WenKai Mono", monospace;
    --font-f-cuneiform: "Noto Sans Cuneiform", sans-serif;
    --font-f-cuneiform-ob: "Cuneiform OB", serif;
    --font-f-cuneiform-na: "Cuneiform NA", serif;
    --font-f-conlang: "Hahabot", "LXGW WenKai", sans-serif;

    /*font weight*/
    --font-w-light: 300;
    --font-w-normal: 400;
    --font-w-medium: 500;
    --font-w-semibold: 600;
    --font-w-bold: 700;

    /*font size*/
    --font-s-xs: 0.75rem; /* 12px */
    --font-s-s: 0.875rem; /* 14px */
    --font-s: 1rem; /* 16px */
    --font-s-l: 1.125rem; /* 18px */
    --font-s-xl: 1.25rem; /* 20px */
    --font-s-2xl: 1.5rem; /* 24px */
    --font-s-3xl: 2rem; /* 32px */
}

/*组件配置*/
:root {
    /*background*/
    --bg-c-descend: var(--gray-95);
    --bg-c: var(--gray-98);
    --bg-c-elevate: var(--gray-100);

    /*border*/
    --border-c: var(--gray-80);
    --border-c-strong: var(--gray-60);
    --border-c-accent: var(--violet-68);
    --border-c-hover: var(--violet-58);
    --border-l: var(--line-1-s);
    --border-l-dash: var(--line-1-d);
    --border-l-hover: var(--line-2-s);
    --border-l-strong: var(--line-3-s);
    --border-r: var(--radius-gap);
    --border-r-strong: var(--radius-semispace);

    /*text*/
    --text-c-title: var(--gray-10);
    --text-c: var(--gray-40);
    --text-c-accent: var(--violet-68);
    --text-c-hover: var(--violet-58);
    --text-cl-highlight: var(--violet-68-a50);
    --text-l-tight: 1.2;
    --text-l: 1.5;
    --text-l-relax: 1.7;
    --text-r: var(--radius-2);
    --text-dl-wavy: var(--line-1-w);

    /*button*/
    --button-c: var(--cream-91);
    --button-c-hover: var(--cream-85);
    --button-s-svg: var(--box-2);
    --button-s-toggle: var(--box-3);

    /*tag*/
    --tag-r: var(--radius-4);

    /*highlight*/
    --highlight-cl: var(--khaki-70-a25);
}

/*深色模式*/
@media (prefers-color-scheme: dark) {
    :root {
        --shadow-focus: 0 0 0 3px hsla(76deg, 100%, 32%, 0.15);

        /*background*/
        --bg-c-descend: var(--gray-10);
        --bg-c: var(--gray-8);
        --bg-c-elevate: var(--gray-5);

        /*border*/
        --border-c: var(--gray-20);
        --border-c-strong: var(--gray-40);
        --border-c-accent: var(--lime-32);
        --border-c-hover: var(--lime-42);

        /*text*/
        --text-c-title: var(--gray-90);
        --text-c: var(--gray-60);
        --text-c-accent: var(--lime-32);
        --text-c-hover: var(--lime-42);
        --text-cl-highlight: var(--lime-32-a50);
    }
}
[data-theme="dark"] {
    --shadow-focus: 0 0 0 3px hsla(76deg, 100%, 32%, 0.15);

    /*background*/
    --bg-c-descend: var(--gray-10);
    --bg-c: var(--gray-8);
    --bg-c-elevate: var(--gray-5);

    /*border*/
    --border-c: var(--gray-20);
    --border-c-strong: var(--gray-40);
    --border-c-accent: var(--lime-32);
    --border-c-hover: var(--lime-42);

    /*text*/
    --text-c-title: var(--gray-90);
    --text-c: var(--gray-60);
    --text-c-accent: var(--lime-32);
    --text-c-hover: var(--lime-42);
    --text-cl-highlight: var(--lime-32-a50);
}