/* ============================================================
   URBINO DESIGN TOKENS · LAYER 3 — WORLD (CITIZEN)
   Citizen-world overrides for semantic tokens.

   Only the values that differ from the default (manager) world.
   Anything not redeclared here inherits the manager default.

   See tokens/README.md for the full architecture.
   ============================================================ */

.urbino-cit {

  /* ============================================================
     FOCUS — slightly larger ring on touch surfaces
     ============================================================ */

  --u-focus-ring:        0 0 0 4px rgba(46, 99, 235, 0.22);
  --u-focus-ring-danger: 0 0 0 4px rgba(220, 38, 38, 0.22);


  /* ============================================================
     CARD — borderless, larger radius, more padding
     ============================================================ */

  --u-card-radius:      var(--u-radius-2xl);   /* 22 */
  --u-card-border:      0;   /* @kind other */
  --u-card-shadow:      var(--u-shadow-sm);
  --u-card-padding:     var(--u-space-5);      /* 20 */
  --u-card-padding-sm:  var(--u-space-4);      /* 16 */
  --u-card-padding-lg:  var(--u-space-6);      /* 24 */
  --u-card-padding-xl:  var(--u-space-7);      /* 28 */
  --u-card-header-px:   var(--u-space-5);      /* 20 */
  --u-card-footer-px:   var(--u-space-5);      /* 20 */
  --u-card-header-title-size: 18px;
  --u-card-press-transform: scale(0.99);   /* @kind other */


  /* ============================================================
     BUTTON — pill, generous tap target
     ============================================================ */

  --u-btn-h-md:        48px;
  --u-btn-h-lg:        56px;
  --u-btn-h-xl:        64px;
  --u-btn-radius-md:   var(--u-radius-pill);
  --u-btn-radius-lg:   var(--u-radius-pill);
  --u-btn-radius-xl:   var(--u-radius-pill);
  --u-btn-px-md:       var(--u-space-6);                  /* 24 */
  --u-btn-px-lg:       var(--u-space-7);                  /* 28 */
  --u-btn-px-xl:       var(--u-space-7);                  /* 28 */
  --u-btn-font-size-md: 16px;
  --u-btn-font-size-lg: 17px;
  --u-btn-font-size-xl: 18px;
  --u-btn-font-weight:  700;
  --u-btn-icon-size-md: 20px;
  --u-btn-icon-size-lg: 22px;
  --u-btn-icon-size-xl: 24px;
  --u-btn-press-transform: scale(0.98);   /* @kind other */


  /* ============================================================
     INPUT — taller, larger radius
     ============================================================ */

  --u-input-h-sm:      48px;
  --u-input-h-md:      56px;
  --u-input-h-lg:      56px;                              /* citizen has no separate lg — same as md */
  --u-input-radius-sm: var(--u-radius-md);               /* 10 */
  --u-input-radius-md: var(--u-radius-lg);               /* 14 */
  --u-input-radius-lg: var(--u-radius-lg);               /* 14 */
  --u-input-px-md:     var(--u-space-4);                  /* 16 */
  --u-input-font-size-md: 16px;
  --u-input-textarea-min-h: 120px;
  --u-input-textarea-py:    14px;
  --u-input-leading-offset: var(--u-space-4);            /* 16 */
  --u-input-icon-size:      20px;
  --u-input-padding-leading: 44px;


  /* ============================================================
     FIELD WRAPPER — bolder label
     ============================================================ */

  --u-field-label-font-size:   14px;
  --u-field-label-font-weight: 600;
  --u-field-label-color:       var(--u-slate-900);


  /* ============================================================
     TOAST — top banner, larger, pill-rounded
     ============================================================ */

  --u-toast-radius:          var(--u-radius-xl);             /* 18 */
  --u-toast-py:              var(--u-space-4);               /* 16 */
  --u-toast-px:              var(--u-space-5);               /* 20 */
  --u-toast-width:           100%;                            /* full-width on mobile */
  --u-toast-max-width:       calc(100vw - var(--u-space-4) * 2);
  --u-toast-icon-size:       24px;
  --u-toast-title-font-size: 16px;
  --u-toast-body-font-size:  15px;
  --u-toast-container-py:    var(--u-space-4);
  --u-toast-container-px:    var(--u-space-4);


  /* ============================================================
     DIALOG — larger radius, more generous padding
     ============================================================ */

  --u-dialog-radius:          var(--u-radius-2xl);            /* 22 */
  --u-dialog-header-py:       var(--u-space-5);               /* 20 */
  --u-dialog-header-px:       var(--u-space-6);               /* 24 */
  --u-dialog-body-py:         var(--u-space-5);               /* 20 */
  --u-dialog-body-px:         var(--u-space-6);               /* 24 */
  --u-dialog-footer-py:       var(--u-space-4);               /* 16 */
  --u-dialog-footer-px:       var(--u-space-6);               /* 24 */
  --u-dialog-footer-gap:      var(--u-space-3);               /* 12 */
  --u-dialog-title-font-size: 20px;
  --u-dialog-close-size:      40px;
  --u-overlay-py:             var(--u-space-4);
  --u-overlay-px:             var(--u-space-4);


  /* ============================================================
     TABS — larger tap targets, generous padding
     ============================================================ */

  --u-tab-h-sm:               40px;
  --u-tab-h-md:               48px;
  --u-tab-h-lg:               56px;
  --u-tab-px-sm:              var(--u-space-3);                /* 12 */
  --u-tab-px-md:              var(--u-space-4);                /* 16 */
  --u-tab-px-lg:              var(--u-space-5);                /* 20 */
  --u-tab-font-size-sm:       14px;
  --u-tab-font-size-md:       16px;
  --u-tab-font-size-lg:       17px;
  --u-tab-font-weight-active: 700;
  --u-tab-icon-size-md:       20px;
  --u-tab-icon-size-lg:       22px;


  /* ============================================================
     CHIP — slightly larger
     ============================================================ */

  --u-chip-px-md:      var(--u-space-3);       /* 12 — same number, kept explicit */
  --u-chip-py-md:      4px;


  /* ============================================================
     TAP TARGET FLOOR — 44px for thumbs
     ============================================================ */

  --u-tap-min:         44px;


  /* ============================================================
     TYPE SCALE — bigger floor, mobile-first
     ============================================================ */

  --u-text-sm:     13px;
  --u-text-base:   16px;
  --u-text-md:     18px;
  --u-text-lg:     20px;
  --u-text-xl:     24px;
  --u-text-2xl:    30px;
  --u-text-3xl:    38px;
  --u-text-4xl:    48px;

  --u-h1-size: var(--u-text-3xl);
  --u-h2-size: var(--u-text-2xl);
  --u-h3-size: var(--u-text-xl);
  --u-h4-size: var(--u-text-lg);


  /* ============================================================
     LAYOUT
     ============================================================ */

  --u-page-px:    var(--u-space-4);            /* 16 — mobile default */
  --u-page-py:    var(--u-space-4);            /* 16 */
  --u-page-max-w: 100%;                        /* no max on mobile */


  /* ============================================================
     COMPOSITION RHYTHM — citizen defaults (more breathing room)
     ============================================================ */

  --u-block-gap:        var(--u-space-4);      /* 16 */
  --u-section-gap:      var(--u-space-8);      /* 32 */
  --u-list-tile-py:     var(--u-space-4);      /* 16 */
  --u-list-tile-px:     var(--u-space-5);      /* 20 */
}


/* ============================================================
   BREADCRUMB — citizen
   Grouped with the .u-breadcrumb--cit standalone shortcut so the
   tokens register under the .urbino-cit world scope AND a lone
   citizen breadcrumb can opt in without a .urbino-cit parent.
   ============================================================ */
.urbino-cit,
.u-breadcrumb--cit {
  --u-breadcrumb-font-size:      14px;
  --u-breadcrumb-separator-size: 14px;
  --u-breadcrumb-icon-size:      16px;
}


/* ============================================================
   CITIZEN-WEB CONTEXT (desktop variant of the citizen surface)
   The public-spa. Add .urbino-cit-web alongside .urbino-cit.

   Two layers:
     1. Layout — wider page rhythm, capped measure.
     2. Web control density — the citizen atoms are tuned for
        thumbs (48–56px controls, 44px tap-floor, 700 buttons);
        on a mouse/desktop surface those read oversized. This
        right-sizes the touch-ergonomic dimensions ONLY — brand
        DNA is untouched: pill shape, radii, colours, and the
        16px body scale all stay.

   Inside a .urbino-cit-web region use the BASE component classes
   (.u-btn, .u-input, …) — the world is set by this parent. The
   .u-*--cit shortcuts force touch sizing on the element and would
   shadow this layer.
   ============================================================ */
.urbino-cit.urbino-cit-web {
  /* 1 · Layout */
  --u-page-px:    var(--u-space-8);            /* 32 */
  --u-page-py:    var(--u-space-10);           /* 40 */
  --u-page-max-w: 1120px;

  /* 2 · Web control density — pointer/desktop right-sizing */

  /* Button — 48/56/64 → 44/48/52, lighter weight */
  --u-btn-h-md:         44px;
  --u-btn-h-lg:         48px;
  --u-btn-h-xl:         52px;
  --u-btn-font-size-md: 15px;
  --u-btn-font-size-lg: 16px;
  --u-btn-font-size-xl: 17px;
  --u-btn-font-weight:  600;
  --u-btn-icon-size-md: 18px;
  --u-btn-icon-size-lg: 20px;
  --u-btn-icon-size-xl: 22px;

  /* Input — 48/56 → 40/44/48 */
  --u-input-h-sm:            40px;
  --u-input-h-md:            44px;
  --u-input-h-lg:            48px;
  --u-input-font-size-md:    15px;
  --u-input-icon-size:       18px;
  --u-input-leading-offset:  var(--u-space-3);   /* 12 */
  --u-input-padding-leading: 40px;
  --u-input-textarea-min-h:  104px;
  --u-input-textarea-py:     12px;

  /* Tabs — 40/48/56 → 36/44/48 */
  --u-tab-h-sm:          36px;
  --u-tab-h-md:          44px;
  --u-tab-h-lg:          48px;
  --u-tab-font-size-md:  15px;
  --u-tab-font-size-lg:  16px;
  --u-tab-icon-size-md:  18px;

  /* Field label — a touch tighter for dense web forms */
  --u-field-label-font-size: 13px;

  /* Tap-target floor — pointer allows denser secondary controls;
     primary controls stay ≥44px via their own heights. */
  --u-tap-min: 36px;
}