/* 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;

    /* Motion easing, exponential out for natural deceleration */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* 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 */
    /* Readable todo text on tinted surfaces, light and dark */
    --hab-type-todo-ink: light-dark(#b45309, #fbbf24); /* amber-700, amber-400 */
    --hab-type-habit-bad: #dc2626; /* red-600 */
    --hab-type-habit-bad-dark: #b91c1c; /* red-700 */
    --hab-accent-streak: #f97316; /* orange-500 */
    --hab-accent-success: #16a34a; /* green-600 */

    /* 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));

    /* Splash ink that survives pre-theme rendering, light and dark */
    --hab-ink-inverse: light-dark(#1e293b, #f1f5f9);
    --hab-ink-faint: light-dark(rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.45));
    --hab-track-subtle: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
    --hab-accent-focus: light-dark(#2563eb, #60a5fa);

    /* Brand color, solid. No gradients in app surfaces. */
    --hab-brand: #2563eb;

    /* Modal shell */
    --hab-modal-max-w: 26rem;
    --hab-modal-wide-max-w: 34rem;
    --hab-modal-radius: 16px;
    --hab-modal-header-h: 56px;
}