/* =========================================================================
   hathapp Design Tokens -- single source of truth
   ========================================================================= */
/*
 * Loaded by panel.php BEFORE panel.css.
 * chat.php keeps its own :root (different surface, different visual
 * identity by design) -- it does not load this file.
 *
 * See docs/dev/MOBILE_DESIGN_FRAMEWORK.md (section 4) for the framework
 * this file implements. Touch this file only when the framework changes.
 *
 * Phase 1 contract: panel.php renders byte-identical on desktop after
 * this file replaces the inline :root block in panel.css. Token values
 * below MIRROR the legacy panel.css values for that reason. Later
 * phases (e.g. softer radius, lifted elevated surfaces) belong with
 * the work that actually re-renders the surfaces they affect.
 */

:root {
    /* ---- Canvas -------------------------------------------------------- */
    --bg:           #000000;
    --bg-surface:   #000000;
    --bg-elevated:  #000000;        /* legacy -- equal to --bg today */
    --bg-sheet:     #0c1219;        /* NEW: lifted surface for mobile sheets/drawers */
    --bg-input:     #0a0e14;
    --border:       #1e2d3d;
    --border-soft:  rgba(30, 45, 61, 0.5);

    /* ---- Ink ----------------------------------------------------------- */
    --text:         #dce4ec;
    --text-muted:   #6b839e;

    /* ---- Accent + state ----------------------------------------------- */
    --accent:       #4A90D9;
    --accent-hover: #5DA0E8;
    --accent-dim:   rgba(74, 144, 217, 0.15);
    --red:          #ff4d4d;
    --green:        #2dd66b;
    --blue:         #4d94ff;
    --yellow:       #f5c518;
    --purple:       #b76eff;
    --orange:       #ff8533;

    /* Priority + status (panel.css legacy) */
    --pri-next:    #f5c518;
    --pri-queued:  #4d94ff;
    --pri-backlog: #666666;

    /* ---- Type ---------------------------------------------------------- */
    --font:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    --mono:  'SF Mono', 'Menlo', 'Cascadia Code', monospace;

    /* Typography scale -- the six-step ladder from the design doc.
       New code references --text-* tokens; legacy `font-size: 16px` etc.
       remains valid (the token resolves to the same value). */
    --text-display: 28px;
    --text-2xl:     22px;
    --text-xl:      18px;
    --text-lg:      17px;
    --text-base:    16px;       /* interactive floor */
    --text-sm:      14px;       /* readable-secondary floor */
    --text-chrome:  13px;       /* non-interactive chrome only */

    /* ---- Radius ------------------------------------------------------- */
    --radius:    10px;          /* legacy value -- softening to 14px deferred */
    --radius-sm: 6px;
    --radius-xs: 4px;

    /* ---- Spacing scale (4px base) ------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ---- Safe area (env-fallback to 0) -------------------------------- */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);

    /* ---- Touch -------------------------------------------------------- */
    --touch-min:    44px;       /* Apple HIG floor */
    --tap-feedback: rgba(255, 255, 255, 0.04);

    /* ---- Z-index ladder ----------------------------------------------- */
    --z-app:       1;
    --z-topbar:    50;
    --z-fab:       60;
    --z-bottomnav: 70;
    --z-drawer:    900;
    --z-sheet:    1000;
    --z-toast:    9000;
    --z-login:    9999;
}

/* =========================================================================
   Global base
   ========================================================================= */

html, body {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* Tap feedback -- one consistent "I tapped that" signal app-wide.
   Pairs with the transparent tap-highlight above.
   Scoped to interactive selectors to avoid accidentally tinting cards. */
button, [role="button"],
.nav-tab, .focus-row, .task-row, .focus-compact-row, .board-card, .tap {
    transition: background 0.08s ease-out, opacity 0.08s ease-out;
}
button:active, [role="button"]:active, .tap:active {
    background: var(--tap-feedback);
}

/*
 * Breakpoint cascade (mobile-first, min-width only):
 *   --bp-sm:  480px  -- large phone landscape, small tablet portrait
 *   --bp-md:  768px  -- tablet portrait, small desktop window
 *   --bp-lg: 1024px  -- tablet landscape, standard desktop
 *   --bp-xl: 1280px  -- full 6-column Home grid
 *
 * CSS does not allow var() inside @media. The four numbers above are the
 * source of truth; reference them in inline @media comments so a future
 * grep-and-replace stays cheap.
 */