/* adia:attribute-api/sizing — global spatial attribute API.
   [density] [radius] [size] [gap] [padding] [margin] — the consumer-facing
   selectors that turn spatial primitives into behavior. Moved verbatim out
   of tokens.css (v0.6.48 foundation reorg, ADR-0035); imported by the
   tokens.css barrel AFTER foundation/ so cascade position is unchanged. */

/* ═══════════════════════════════════════════════════════════════
   DENSITY PRESETS — scoped via [density] attribute.
   --a-density controls spacing, padding, gaps, AND component heights.
   --a-radius-k is coupled for visual consistency.

   Usage:
     <div density="compact">...tight layout...</div>
     <div density="spacious">...generous layout...</div>
   ═══════════════════════════════════════════════════════════════ */

[density="compact"] {
  --a-density: 0.85;
  --a-radius-k: 0.75;
}

[density="spacious"] {
  --a-density: 1.15;
  --a-radius-k: 1.25;
}

/* ── Radius presets — scoped via [radius] attribute ── */

[radius="sharp"] {
  --a-radius-k: 0;
  --a-radius-min: 0rem;
  --a-radius-max: 0rem;
}

[radius="rounded"] {
  --a-radius-k: 1.5;
}

[radius="round"] {
  --a-radius-k: 2;
  --a-radius-max: 3rem;
}

/* ═══════════════════════════════════════════════════════════════
   SIZE PRESETS — universal [size="sm|md|lg"] attribute.

   Sets BOTH component tokens AND container tokens.
   Each tier shifts the entire typescale to its sm/md/lg variant.

   Component: --a-size, --a-ui-px, --a-ui-size, --a-icon-size
   Container: --a-inset, --a-gap
   Typography: all 13 role sizes shift to the tier's variant

   Usage:
     <button-ui size="sm">            — compact button
     <card-ui size="lg">...</card-ui>  — spacious card + larger type inside
     <div size="sm">...</div>        — everything inside scales down
   ═══════════════════════════════════════════════════════════════ */
/* ── sm — dense data UIs, sidebars, inspectors ── */
[size] {
  font-size: var(--a-body-size);
}
[size="sm"] {
  /* Component */
  --a-size: calc(var(--a-density) * 1.5rem);
  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-2)); /* 16px at d=1 */
  --a-ui-px: var(--a-space-1-5);
  --a-ui-size: var(--a-ui-sm);
  --a-icon-size: 0.875rem;
  --a-caret-size: 0.75rem;
  /* Container */
  --a-inset: var(--a-inset-sm);
  --a-gap: var(--a-gap-sm);
  --a-radius: var(--a-radius-sm);
  /* Typography — all roles shift to -sm */
  --a-display-size: var(--a-display-sm);
  --a-title-size: var(--a-title-sm);
  --a-heading-size: var(--a-heading-sm);
  --a-section-size: var(--a-section-sm);
  --a-subsection-size: var(--a-subsection-sm);
  --a-body-size: var(--a-body-sm);
  --a-deck-size: var(--a-deck-sm);
  --a-caption-size: var(--a-caption-sm);
  --a-kicker-size: var(--a-kicker-sm);
  --a-label-size: var(--a-label-sm);
  --a-metric-size: var(--a-metric-sm);
  --a-code-size: var(--a-code-sm);
}

/* [size="md"] is the default — no overrides needed */

/* ── lg — pages, hero sections, marketing ── */
[size="lg"] {
  /* Component */
  --a-size: calc(var(--a-density) * 2.25rem);
  --a-toggle-size: var(--a-size-sm); /* 24px at d=1 */
  --a-ui-px: var(--a-space-3);
  --a-ui-size: var(--a-ui-lg);
  --a-icon-size: 1.25rem;
  --a-caret-size: 1rem;
  /* Container */
  --a-inset: var(--a-inset-lg);
  --a-gap: var(--a-gap-lg);
  --a-radius: var(--a-radius-lg);
  /* Typography — all roles shift to -lg */
  --a-display-size: var(--a-display-lg);
  --a-title-size: var(--a-title-lg);
  --a-heading-size: var(--a-heading-lg);
  --a-section-size: var(--a-section-lg);
  --a-subsection-size: var(--a-subsection-lg);
  --a-body-size: var(--a-body-lg);
  --a-deck-size: var(--a-deck-lg);
  --a-caption-size: var(--a-caption-lg);
  --a-kicker-size: var(--a-kicker-lg);
  --a-label-size: var(--a-label-lg);
  --a-metric-size: var(--a-metric-lg);
  --a-code-size: var(--a-code-lg);
}

/* ═══════════════════════════════════════════════════════════════
   [gap] — the EXPLICIT per-element gap (a spatial Scale attr).

   Sets --a-gap-self, a NON-inheriting token, so an explicit gap on a
   parent does NOT leak into nested layout primitives. This is the
   counterpart to --a-gap, the AMBIENT gap set by [size]/[prose]/:root
   (which DOES inherit — `<div size="sm">` shifts the whole subtree).
   Gap-reading components resolve `var(--a-gap-self, var(--a-gap))`:
   explicit-if-present, else fall through to the inherited ambient.
   Design: docs/specs/attribute-api-system.md §5.2 (ADR-0038 / D2).

   syntax:"*" (NOT "<length>") is load-bearing: a universal-syntax
   @property may omit initial-value, leaving the token genuinely
   *unset-able* (guaranteed-invalid when not set) — so the fallback to
   --a-gap fires for elements without [gap]. A typed @property carries a
   mandatory initial-value that always-resolves and would mask the
   ambient. inherits:false stops the leak (audit C3).
   ═══════════════════════════════════════════════════════════════ */
@property --a-gap-self {
  syntax: "*";
  inherits: false;
}

[gap="0"] {
  --a-gap-self: 0;
}
[gap="1"] {
  --a-gap-self: var(--a-space-1);
}
[gap="2"] {
  --a-gap-self: var(--a-space-2);
}
[gap="3"] {
  --a-gap-self: var(--a-space-3);
}
[gap="4"] {
  --a-gap-self: var(--a-space-4);
}
[gap="5"] {
  --a-gap-self: var(--a-space-5);
}
[gap="6"] {
  --a-gap-self: var(--a-space-6);
}
[gap="7"] {
  --a-gap-self: var(--a-space-7);
}
[gap="8"] {
  --a-gap-self: var(--a-space-8);
}
[gap="9"] {
  --a-gap-self: var(--a-space-9);
}
[gap="10"] {
  --a-gap-self: var(--a-space-10);
}
[gap="12"] {
  --a-gap-self: var(--a-space-12);
}
[gap="16"] {
  --a-gap-self: var(--a-space-16);
}

/* Named scale — the semantic, parametric gap vocabulary (xs/sm/md/lg/xl).
   References the --a-gap-* tokens (foundation/space.css) so explicit
   [gap="md"] AGREES with the ambient ([size]) and responsive (JS _gapToCss)
   paths — all resolve to --a-gap-md — and tracks the --a-gap-k knob. This is
   distinct from the integer rules above, which are LITERAL space-rungs
   (k-independent). At k=1 the two grammars coincide: xs=1, sm=2, md=3,
   lg=4, xl=5. (C1/C2 resolution — two coherent grammars, not one deprecated.) */
[gap="xs"] {
  --a-gap-self: var(--a-gap-xs);
}
[gap="sm"] {
  --a-gap-self: var(--a-gap-sm);
}
[gap="md"] {
  --a-gap-self: var(--a-gap-md);
}
[gap="lg"] {
  --a-gap-self: var(--a-gap-lg);
}
[gap="xl"] {
  --a-gap-self: var(--a-gap-xl);
}

/* ── Universal [padding] / [margin] — same scale as [gap]. Layout
   primitives (row-ui, col-ui, grid-ui, stack-ui) opt in by reading
   var(--a-padding, 0) and var(--a-margin, 0). Components with their
   own padding/margin contracts (block-ui, card-ui, drawer-ui) keep
   their scoped declarations and aren't affected.

   Registered as non-inheriting via @property so a parent's
   [padding="6"] doesn't bleed into nested layout primitives —
   children see the initial-value (0) unless they declare their own
   [padding] / [margin]. */
@property --a-padding {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --a-margin {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

[padding="0"]  { --a-padding: 0; }
[padding="1"]  { --a-padding: var(--a-space-1); }
[padding="2"]  { --a-padding: var(--a-space-2); }
[padding="3"]  { --a-padding: var(--a-space-3); }
[padding="4"]  { --a-padding: var(--a-space-4); }
[padding="5"]  { --a-padding: var(--a-space-5); }
[padding="6"]  { --a-padding: var(--a-space-6); }
[padding="7"]  { --a-padding: var(--a-space-7); }
[padding="8"]  { --a-padding: var(--a-space-8); }
[padding="9"]  { --a-padding: var(--a-space-9); }
[padding="10"] { --a-padding: var(--a-space-10); }
[padding="12"] { --a-padding: var(--a-space-12); }
[padding="16"] { --a-padding: var(--a-space-16); }

/* Named scale — parametric (value × --a-padding-k), xs–xl; references the
   --a-padding-* tokens (foundation/space.css), so it tracks the --a-padding-k
   knob and composes on --a-density. sm/md/lg keep their prior values
   (16/24/32px @k=1) — behavior-neutral; xs (8) + xl (40) are new. Distinct
   from the integer rules above, which are LITERAL space-rungs (k-independent). */
[padding="xs"] { --a-padding: var(--a-padding-xs); }
[padding="sm"] { --a-padding: var(--a-padding-sm); }
[padding="md"] { --a-padding: var(--a-padding-md); }
[padding="lg"] { --a-padding: var(--a-padding-lg); }
[padding="xl"] { --a-padding: var(--a-padding-xl); }

[margin="0"]  { --a-margin: 0; }
[margin="1"]  { --a-margin: var(--a-space-1); }
[margin="2"]  { --a-margin: var(--a-space-2); }
[margin="3"]  { --a-margin: var(--a-space-3); }
[margin="4"]  { --a-margin: var(--a-space-4); }
[margin="5"]  { --a-margin: var(--a-space-5); }
[margin="6"]  { --a-margin: var(--a-space-6); }
[margin="7"]  { --a-margin: var(--a-space-7); }
[margin="8"]  { --a-margin: var(--a-space-8); }
[margin="9"]  { --a-margin: var(--a-space-9); }
[margin="10"] { --a-margin: var(--a-space-10); }
[margin="12"] { --a-margin: var(--a-space-12); }
[margin="16"] { --a-margin: var(--a-space-16); }

/* Named scale — parametric (value × --a-margin-k), xs–xl; references the
   --a-margin-* tokens (foundation/space.css). sm/md/lg unchanged (16/24/32px
   @k=1) — behavior-neutral; xs (8) + xl (40) added; tracks --a-margin-k. */
[margin="xs"] { --a-margin: var(--a-margin-xs); }
[margin="sm"] { --a-margin: var(--a-margin-sm); }
[margin="md"] { --a-margin: var(--a-margin-md); }
[margin="lg"] { --a-margin: var(--a-margin-lg); }
[margin="xl"] { --a-margin: var(--a-margin-xl); }
