/*
|–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
| webeditor — theme
|–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
| The nanobase colour theme and design tokens, verbatim from nanobase's
| 01-tokens.css, plus its @font-face declarations re-pointed at webeditor's
| local font files. Everything downstream — the editor chrome and the utility
| classes the canvas renders — reads from these variables, so a webeditor page
| and a real nanobase page resolve to the exact same colours and metrics.
*/

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 400 550;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('../fonts/JetBrainsMonoMedium.woff2') format('woff2');
    font-weight: 500;
}

:root {
    --siz-fix: 12px;
    --siz-min: 12px;
    --siz-0:   13px;
    --siz-1:   19px;
    --siz-2:   22px;
    --siz-3:   26px;
    --siz-4:   32px;
    --siz-5:   56px;
    --siz-6:   64px;

    --lmt: 1440px;

    --btn-hgt: 44px;
    --btn-wid: 44px;
    --tlb-wdt: 3.5rem;
    --mst-hgt: var(--tlb-wdt);

    --rad-1: 5px;
    --rad-2: 9px;
    --rad-3: 13px;
    --rad-4: 17px;

    --str: 2px;

    --fnt-std: 'Inter', -apple-system, Arial, sans-serif;
    --fnt-btn: 'Inter', -apple-system, Arial, sans-serif;
    --fnt-hdg: 'Inter', -apple-system, Arial, sans-serif;
    --fnt-fix: 'JetBrainsMono', -apple-system, monotype;

    --wht-0: hsl(214, 13%, 100%);
    --wht-1: hsl(214, 13%, 98%);
    --wht-2: hsl(214, 13%, 75%);
    --wht-3: hsl(214, 10%, 35%);

    --blk-0: hsl(214, 14%, 28%);
    --blk-1: hsl(214, 14%, 22%);
    --blk-2: hsl(214, 16%, 18%);
    --blk-3: hsl(214, 16%, 16%);
    --blk-4: hsl(214, 18%, 12%);

    --red-0: hsla(10, 100%, 55%, .75);
    --red-1: hsl(10, 100%, 55%);
    --red-2: hsl(10, 100%, 45%);
    --red-3: hsl(10, 100%, 35%);

    --grn-0: hsla(160, 80%, 40%, .75);
    --grn-1: hsl(160, 80%, 40%);
    --grn-2: hsl(160, 80%, 30%);
    --grn-3: hsl(160, 80%, 30%);

    --blu-0: hsla(210, 100%, 42%, .75);
    --blu-1: hsl(210, 100%, 42%);
    --blu-2: hsl(210, 100%, 20%);
    --blu-3: hsl(210, 100%, 10%);

    --pur-0: hsla(255, 100%, 80%, .75);
    --pur-1: hsl(255, 100%, 70%);
    --pur-2: hsl(255, 100%, 65%);
    --pur-3: hsl(255, 100%, 60%);

    --ylw-0: hsla(40, 100%, 65%, .75);
    --ylw-1: hsl(40, 100%, 65%);
    --ylw-2: hsl(40, 100%, 60%);
    --ylw-3: hsl(40, 100%, 55%);

    --cya-0: hsla(195, 80%, 55%, .75);
    --cya-1: hsl(195, 80%, 55%);
    --cya-2: hsl(195, 80%, 40%);
    --cya-3: hsl(195, 80%, 35%);

    --org-0: hsl(32, 60%, 60%);
    --org-1: hsl(32, 60%, 50%);
    --org-2: hsl(32, 60%, 40%);
    --org-3: hsl(32, 60%, 30%);

    --mag-0: hsla(280, 60%, 55%, .75);
    --mag-1: hsl(280, 60%, 55%);
    --mag-2: hsl(280, 60%, 45%);
    --mag-3: hsl(280, 60%, 35%);

    --lim-0: hsla(90, 80%, 55%, .75);
    --lim-1: hsl(90, 80%, 55%);
    --lim-2: hsl(90, 80%, 45%);
    --lim-3: hsl(90, 80%, 35%);

    --color-bg:           var(--blk-1);
    --color-surface:      var(--blk-0);
    --color-fg:           var(--wht-3);
    --color-fg-muted:     var(--blk-3);
    --color-border:       var(--wht-3);
    --color-accent:       #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-accent-fg:    hsl(214,13%,96%);
    --color-danger:       #dc2626;
    --color-danger-bg:    #fef2f2;
    --color-success:      #16a34a;

    --line-height-base:  1.5;
    --line-height-tight: 1.2;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

    --shd-1: 0 .5rem .5rem hsla(0, 0%, 0%, .1);
    --shd-2: 0 .5rem .5rem hsla(0, 0%, 0%, .1);

    --trn: all 0.025s ease-in-out;
    --log: cubic-bezier(0, 0.85, 0.9, 0.95);
}