/* Glitcher — base styles. All color/typography tokens come from handfish
   tokens.css plus the per-theme override CSS loaded by handfish-theme.js.
   Keep this file thin; component look lives in components.css. */

:root {
    /* Handfish's default size scale is tuned for dense designer dashboards;
       a glitch-art camera tool is meant to be read at arm's length, not 2ft
       from the screen. Bump everything ~1.2x so labels are legible. */
    --hf-size-xs:   0.75rem;    /* 12px (handfish: 10px) */
    --hf-size-sm:   0.875rem;   /* 14px (handfish: 12px) */
    --hf-size-base: 1rem;       /* 16px (handfish: 14px) */
    --hf-size-md:   1.125rem;   /* 18px (handfish: 16px) */
    --hf-size-lg:   1.3125rem;  /* 21px (handfish: 18px) */
    --hf-size-xl:   1.5rem;     /* 24px (handfish: 20px) */
    --hf-size-2xl:  1.6875rem;  /* 27px (handfish: 24px) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--hf-bg-base);
    color: var(--hf-text-normal);
    font-family: var(--hf-font-family);
    font-size: var(--hf-size-sm);
    overflow: hidden;
    height: 100dvh;
    -webkit-font-smoothing: antialiased;
}