/* Habitinator design tokens
 *
 * Single source of truth for the cross-cutting design values used across
 * global and component stylesheets. Load this file first, before any other
 * app stylesheet.
 *
 * -- Breakpoint scale --
 * Media query conditions cannot use var() so always write these literals:
 *
 *   narrow   max-width: 359.98px   phone portrait
 *   tight    max-width: 399.98px   small dialogs and compact panels
 *   compact  max-width: 479.98px   compact cards
 *   mobile   max-width: 599.98px   phones
 *   nav      max-width: 767.98px   legacy bottom nav and compact top bar
 *   tablet   max-width: 959.98px   MudBlazor md and below
 *   desktop  min-width: 960px      MudBlazor md and up
 *   wide     min-width: 1280px     MudBlazor lg and up
 *
 * The scale mirrors MudBlazor breakpoints so CSS and MudGrid align.
 */

:root {
    /* Spacing scale, in rem */
    --space-1: 0.25rem;
    --space-2: 0.35rem;
    --space-3: 0.4rem;
    --space-4: 0.5rem;
    --space-5: 0.75rem;
    --space-6: 1rem;
    --space-7: 1.5rem;
    --space-8: 2rem;

    /* Corner radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-pill: 999px;

    /* Motion durations */
    --dur-fast: 0.1s;
    --dur-normal: 0.15s;
    --dur-slow: 0.2s;

    /* App shell sizing */
    --topbar-height: 56px;
    --mobile-nav-height: 44px;
    --control-height: 40px;

    /* Elevation layers, app-defined and above MudBlazor's own scale */
    --z-nav: 1200;
    --z-error: 1000;
    --z-max: 99999;

    /* Item-type accent colors, the single source for board, cards, and dialogs */
    --hab-type-habit: #0d9488; /* teal-600 */
    --hab-type-daily: var(--mud-palette-primary);
    --hab-type-todo: #f59e0b; /* amber-500 */

    /* Card container borders. Softer than the divider line, theme-aware. */
    --hab-border-card: light-dark(rgba(15, 23, 42, 0.10), rgba(255, 255, 255, 0.06));

    /* Brand gradient, used for splash bars and loaders */
    --hab-brand-gradient: linear-gradient(90deg, #3b82f6, #8b5cf6);
}