/*  ===========================================================================
    # Canvas Theme (token overrides)

    Loaded by CanvasShell after pyhx.css. Same token names as pyhx/theme.css,
    only the values the canvas design changes; every other token keeps its
    default from theme.css.

    Deliberately unlayered (see the CSS authoring conventions, §10): theme.css
    sets its tokens with `:root:not([data-theme="dark"])`, which out-specifies
    a plain `:root` inside the same layer. Unlayered rules win over every
    layer, so this file must contain only `:root` rules.
    ======================================================================== */

:root {
    /* PyHX Brand Colors */
    --hx-color-text: #171717;
    --hx-color-canvas: #eeeeee;

    /* Typography */
    --pico-font-size: 100%;  /* 16px root, so the rem-based scales match the design */
    --pico-font-family: "Inter", system-ui, sans-serif;
    --hx-font-heading: "Inter", system-ui, sans-serif;

    /* Font size roles (see theme.css), as in the draft */
    --hx-text-page-title: 2rem;              /* 32px */
    --hx-text-title:      0.9375rem;         /* 15px */
    --hx-text-item:       var(--hx-text-sm); /* 14px */
    --hx-text-meta:       var(--hx-text-xs); /* 12px */
    --hx-text-badge:      0.6875rem;         /* 11px */
    --hx-text-body:       0.9375rem;         /* 15px */
    --hx-text-control:    var(--hx-text-sm); /* 14px */

    /* Neutral (Gray) */
    --hx-color-neutral-050: #FAFAFA;
    --hx-color-neutral-100: #F3F3F3;
    --hx-color-neutral-150: #EEEEEE;
    --hx-color-neutral-200: #DCE1E5;
    --hx-color-neutral-300: #D4D4D4;
    --hx-color-neutral-400: #A1A1A1;
    --hx-color-neutral-500: #737373;
    --hx-color-neutral-600: #525252;
    --hx-color-neutral-700: #404040;
    --hx-color-neutral-800: #262626;
    --hx-color-neutral-900: #171717;

    /* Semantic scales from the design draft (Tailwind v4 palette plus its own
       "jade" green). Steps the draft doesn't use come from the same Tailwind
       hue, so the tones stay consistent. */

    /* Danger: orange, the draft's alert colour (it has no red) */
    --hx-color-danger-050: #FFF7ED;   /* orange-50 */
    --hx-color-danger-100: #FFEDD4;   /* orange-100 */
    --hx-color-danger-500: #FF6900;   /* orange-500 */
    --hx-color-danger-600: #F54A00;   /* orange-600 */

    /* Warning: amber */
    --hx-color-warning-050: #FFFBEB;  /* amber-50 */
    --hx-color-warning-100: #FEF3C6;  /* amber-100 */
    --hx-color-warning-500: #FE9A00;  /* amber-500 */
    --hx-color-warning-600: #E17100;  /* amber-600 */
    --hx-color-warning-700: #BB4D00;  /* amber-700 */
    --hx-color-warning-800: #973C00;  /* amber-800 */

    /* Success: jade */
    --hx-color-success-050: #EFFCF5;  /* jade-50 */
    --hx-color-success-500: #00A466;  /* jade-600 */
    --hx-color-success-600: #00843F;  /* jade-700 */

    /* Info: sky */
    --hx-color-info-050: #F0F9FF;     /* sky-50 */
    --hx-color-info-600: #0084D1;     /* sky-600 */
}