/* ============================================================
   URBINO DESIGN TOKENS · LAYER 3b — DENSITY MODES
   Section-level composition rhythm.

   Four density modes from docs/spacing.md §3 made
   machine-actionable via [data-density] attribute selectors.
   A consumer wraps a region in <section data-density="work">
   and every composing component inside picks up the work-mode
   token values automatically — same cascade as .urbino-cit.

   Manager defaults (= Canvas-ish) come from tokens/semantic.css
   :root. Citizen defaults come from world-cit.css. THIS file
   layers on top: opt-in section overrides.

   Modes:
     header   — page headers, top bars, hero promos (generous)
     canvas   — dashboards, KPI strips, citizen screens (default)
     work     — manager queue / list / dense form
     data     — table / list with border-driven separation (0 gap)

   Composes cleanly: a [data-density="canvas"] dashboard with a
   nested [data-density="data"] table — the inner attribute wins
   for its subtree.

   See docs/spacing.md → "How to apply density modes" for the
   downstream-consumer cookbook.
   ============================================================ */


/* ============================================================
   HEADER — anchor regions, generous breathing room
   ============================================================ */

[data-density="header"] {
  --u-block-gap:        var(--u-space-4);     /* 16 */
  --u-section-gap:      var(--u-space-6);     /* 24 */
  --u-card-padding:     var(--u-space-6);     /* 24 */
  --u-card-padding-sm:  var(--u-space-5);     /* 20 */
  --u-list-tile-py:     var(--u-space-4);     /* 16 */
  --u-list-tile-px:     var(--u-space-5);     /* 20 */
}


/* ============================================================
   CANVAS — dashboards, KPI strips, citizen screens
   This is the default rhythm; declared explicitly so the
   attribute selector can be applied as a marker even when the
   values match :root.
   ============================================================ */

[data-density="canvas"] {
  --u-block-gap:        var(--u-space-3);     /* 12 mgr / 16 cit via world override below */
  --u-section-gap:      var(--u-space-8);     /* 32 — section gap on Canvas surfaces */
  --u-card-padding:     var(--u-space-4);     /* 16 mgr / 20 cit */
  --u-card-padding-sm:  var(--u-space-3);     /* 12 mgr / 16 cit */
  --u-list-tile-py:     var(--u-space-3);     /* 12 mgr / 16 cit */
  --u-list-tile-px:     var(--u-space-4);     /* 16 mgr / 20 cit */
}


/* ============================================================
   WORK — manager queue / list / dense form
   The default density for the manager content area when it's
   showing a list of records.
   ============================================================ */

[data-density="work"] {
  --u-block-gap:        var(--u-space-2);     /* 8 — row-cards touch closer */
  --u-section-gap:      var(--u-space-6);     /* 24 — section gap (revised down from 32) */
  --u-card-padding:     var(--u-space-3);     /* 12 — row-card padding */
  --u-card-padding-sm:  10px;                 /* sub-grid for atom-internal queue rows */
  --u-list-tile-py:     8px;                  /* sub-grid 8px Y */
  --u-list-tile-px:     var(--u-space-3);     /* 12 */
  --u-stack-tight-gap:  var(--u-space-2);     /* alias for legacy --tight modifier */
}


/* ============================================================
   DATA — table / list rows separated by borders, not gaps
   ============================================================ */

[data-density="data"] {
  --u-block-gap:        0;
  --u-section-gap:      0;
  --u-card-padding:     0;
  --u-card-padding-sm:  0;
  --u-list-tile-py:     var(--u-space-2);     /* 8 — table cell Y */
  --u-list-tile-px:     var(--u-space-3);     /* 12 — table cell X */
}


/* ============================================================
   COMPACT MODIFIER — combines with WORK
   The optional user-level "Compact density" toggle from the
   spacing playbook (§8.4). Reduces row heights, tightens further.

   Usage: <body data-density="work" data-density-mode="compact">
   ============================================================ */

[data-density="work"][data-density-mode="compact"],
[data-density-mode="compact"] [data-density="work"] {
  --u-block-gap:        var(--u-space-1);     /* 4 — packed */
  --u-card-padding-sm:  8px;                  /* 8 */
  --u-list-tile-py:     4px;                  /* 4 */
  --u-btn-h-md:         32px;                 /* manager Compact row floor */
  --u-input-h-md:       32px;
}


/* ============================================================
   CITIZEN OVERRIDES — for sections inside .urbino-cit
   Citizen world bumps the floor of each density mode (mobile
   thumbs, calmer reading) without changing the rhythm intent.
   ============================================================ */

.urbino-cit [data-density="header"] {
  --u-block-gap:        var(--u-space-5);     /* 20 */
  --u-section-gap:      var(--u-space-8);     /* 32 */
  --u-card-padding:     var(--u-space-6);     /* 24 */
  --u-list-tile-py:     var(--u-space-4);
  --u-list-tile-px:     var(--u-space-5);
}

.urbino-cit [data-density="canvas"] {
  --u-block-gap:        var(--u-space-4);     /* 16 */
  --u-section-gap:      var(--u-space-10);    /* 40 — citizen web hero */
  --u-card-padding:     var(--u-space-5);     /* 20 */
  --u-card-padding-sm:  var(--u-space-4);
  --u-list-tile-py:     var(--u-space-4);
  --u-list-tile-px:     var(--u-space-5);
}

/* WORK / DATA are intentionally manager-shaped. Citizen surfaces
   don't run queue-density or table-density screens; if a citizen
   page needs them, it should opt in to manager values anyway. */