/* ==========================================================================
   Decimal Design System — Padding & Spacing (Component Layer)
   Component-layer tokens for size, padding, and gap definitions. Each token
   maps to a layout size or UI style variable and can be used directly in UI
   elements and components. Padding & spacing variables define specific unit
   usage in our UI: fixed + fluid sizes (height + width), fixed + fluid
   padding, fixed + fluid gap, and content strings.
   ========================================================================== */

:root {

  /* --- Size / Fixed --- */
  --size-fixed-min: var(--unit-fixed-min);
  --size-fixed-xxs: var(--unit-fixed-3);
  --size-fixed-xs: var(--unit-fixed-5);
  --size-fixed-s: var(--unit-fixed-6);
  --size-fixed-m: var(--unit-fixed-7);
  --size-fixed-l: var(--unit-fixed-8);
  --size-fixed-xl: var(--unit-fixed-10);
  --size-fixed-xxl: var(--unit-fixed-11);
  --size-fixed-3xl: var(--unit-fixed-12);
  --size-fixed-4xl: var(--unit-fixed-13);
  --extremum: 288px;
  --default: 352px;

  /* --- Size / Fluid / Frame --- */
  --size-fluid-frame-x: var(--frame-x);
  --size-fluid-frame-y: var(--frame-y);

  /* --- Size / Fluid / General --- */
  --size-fluid-general-xxs: var(--unit-fluid-general-3);
  --size-fluid-general-xs: var(--unit-fluid-general-5);
  --size-fluid-general-s: var(--unit-fluid-general-6);
  --size-fluid-general-m: var(--unit-fluid-general-7);
  --size-fluid-general-l: var(--unit-fluid-general-8);
  --size-fluid-general-xl: var(--unit-fluid-general-10);
  --size-fluid-general-xxl: var(--unit-fluid-general-11);
  --size-fluid-general-3xl: var(--unit-fluid-general-12);
  --size-fluid-general-4xl: var(--unit-fluid-general-13);

  /* --- Size / Fluid / Grid / Primary / Percentage --- */
  --size-fluid-grid-primary-percentage-100: var(--unit-fluid-grid-primary-percentage-100);
  --size-fluid-grid-primary-percentage-75: var(--unit-fluid-grid-primary-percentage-75);
  --size-fluid-grid-primary-percentage-50: var(--unit-fluid-grid-primary-percentage-50);
  --size-fluid-grid-primary-percentage-25: var(--unit-fluid-grid-primary-percentage-25);

  /* --- Size / Fluid / Grid / Primary / Columns --- */
  --size-fluid-grid-primary-columns-1: var(--unit-fluid-grid-primary-columns-1);
  --size-fluid-grid-primary-columns-2: var(--unit-fluid-grid-primary-columns-2);
  --size-fluid-grid-primary-columns-3: var(--unit-fluid-grid-primary-columns-3);
  --size-fluid-grid-primary-columns-4: var(--unit-fluid-grid-primary-columns-4);
  --size-fluid-grid-primary-columns-5: var(--unit-fluid-grid-primary-columns-5);
  --size-fluid-grid-primary-columns-6: var(--unit-fluid-grid-primary-columns-6);
  --size-fluid-grid-primary-columns-7: var(--unit-fluid-grid-primary-columns-7);
  --size-fluid-grid-primary-columns-8: var(--unit-fluid-grid-primary-columns-8);
  --size-fluid-grid-primary-columns-9: var(--unit-fluid-grid-primary-columns-9);
  --size-fluid-grid-primary-columns-10: var(--unit-fluid-grid-primary-columns-10);
  --size-fluid-grid-primary-columns-11: var(--unit-fluid-grid-primary-columns-11);
  --size-fluid-grid-primary-columns-12: var(--unit-fluid-grid-primary-columns-12);
  --size-fluid-grid-primary-columns-13: var(--unit-fluid-grid-primary-columns-13);
  --size-fluid-grid-primary-columns-14: var(--unit-fluid-grid-primary-columns-14);
  --size-fluid-grid-primary-columns-15: var(--unit-fluid-grid-primary-columns-15);
  --size-fluid-grid-primary-columns-16: var(--unit-fluid-grid-primary-columns-16);

  /* --- Size / Fluid / Forms / Standard Layout --- */
  --size-fluid-forms-standard-layout-short: var(--forms-standard-short);
  --size-fluid-forms-standard-layout-default: var(--forms-standard-default);
  --size-fluid-forms-standard-layout-long: var(--forms-standard-long);

  /* --- Size / Fluid / Forms / Siderail Layout --- */
  --size-fluid-forms-siderail-layout-short: var(--forms-siderail-short);
  --size-fluid-forms-siderail-layout-default: var(--forms-siderail-default);
  --size-fluid-forms-siderail-layout-long: var(--forms-siderail-long);

  /* --- Padding / Fixed --- */
  --padding-fixed-xxs: var(--unit-fixed-2);
  --padding-fixed-xs: var(--unit-fixed-3);
  --padding-fixed-s: var(--unit-fixed-4);
  --padding-fixed-m: var(--unit-fixed-5);
  --padding-fixed-l: var(--unit-fixed-6);
  --padding-fixed-xl: var(--unit-fixed-7);
  --padding-fixed-xxl: var(--unit-fixed-8);

  /* --- Padding / Fluid / General --- */
  --padding-fluid-xxs: var(--unit-fluid-general-2);
  --padding-fluid-xs: var(--unit-fluid-general-3);
  --padding-fluid-s: var(--unit-fluid-general-4);
  --padding-fluid-m: var(--unit-fluid-general-5);
  --padding-fluid-l: var(--unit-fluid-general-6);
  --padding-fluid-xl: var(--unit-fluid-general-7);
  --padding-fluid-xxl: var(--unit-fluid-general-8);

  /* --- Padding / Fluid / Grid --- */
  --padding-fluid-grid-primary: var(--grid-margin-primary);
  --padding-fluid-grid-nested: var(--grid-margin-nested);
  --padding-fluid-grid-forms: var(--grid-margin-forms);

  /* --- Gap / Fixed --- */
  --gap-fixed-xxs: var(--unit-fixed-1);
  --gap-fixed-xs: var(--unit-fixed-2);
  --gap-fixed-s: var(--unit-fixed-3);
  --gap-fixed-m: var(--unit-fixed-5);
  --gap-fixed-l: var(--unit-fixed-6);
  --gap-fixed-xl: var(--unit-fixed-7);
  --gap-fixed-xxl: var(--unit-fixed-8);

  /* --- Gap / Fluid / General --- */
  --gap-fluid-general-xxs: var(--unit-fluid-general-1);
  --gap-fluid-general-xs: var(--unit-fluid-general-2);
  --gap-fluid-general-s: var(--unit-fluid-general-3);
  --gap-fluid-general-m: var(--unit-fluid-general-5);
  --gap-fluid-general-l: var(--unit-fluid-general-6);
  --gap-fluid-general-xl: var(--unit-fluid-general-7);
  --gap-fluid-general-xxl: var(--unit-fluid-general-8);

  /* --- Gap / Fluid / Grid --- */
  --gap-fluid-grid-primary: var(--grid-gutter-primary);
  --gap-fluid-grid-nested: var(--grid-gutter-nested);
  --gap-fluid-grid-forms: var(--grid-gutter-forms);
}