/* ========================================================================== Decimal Design System — Layout Size (Translation Layer) Responsive layout tokens using CSS custom properties scoped to @media breakpoints in a mobile-first cascade. Default / design-spec breakpoint: Extra Large (1584–1783 px). ========================================================================== */ /* -------------------------------------------------------------------------- Extra Small (320–671 px) — base values in :root -------------------------------------------------------------------------- */ :root { /* --- Frame --- */ --frame-x: 320px; --frame-y: 800px; /* --- Grid / Count --- */ --grid-count-primary: 4; --grid-count-nested: 4; --grid-count-forms: 4; /* --- Grid / Margin --- */ --grid-margin-primary: 16px; --grid-margin-nested: 16px; --grid-margin-forms: 16px; /* --- Grid / Gutter --- */ --grid-gutter-primary: 32px; --grid-gutter-nested: 8px; --grid-gutter-forms: 8px; /* --- Unit / Fluid / General --- */ --unit-fluid-general-1: var(--unit-fixed-1); --unit-fluid-general-2: var(--unit-fixed-1); --unit-fluid-general-3: var(--unit-fixed-2); --unit-fluid-general-4: var(--unit-fixed-2); --unit-fluid-general-5: var(--unit-fixed-2); --unit-fluid-general-6: var(--unit-fixed-4); --unit-fluid-general-7: var(--unit-fixed-5); --unit-fluid-general-8: var(--unit-fixed-6); --unit-fluid-general-9: var(--unit-fixed-7); --unit-fluid-general-10: var(--unit-fixed-8); --unit-fluid-general-11: var(--unit-fixed-9); --unit-fluid-general-12: var(--unit-fixed-10); --unit-fluid-general-13: var(--unit-fixed-11); /* --- Unit / Fluid / Grid / Primary / Percentage --- */ --unit-fluid-grid-primary-percentage-25: 48px; --unit-fluid-grid-primary-percentage-50: 128px; --unit-fluid-grid-primary-percentage-75: 208px; --unit-fluid-grid-primary-percentage-100: 288px; /* --- Unit / Fluid / Grid / Primary / Columns --- */ --unit-fluid-grid-primary-columns-1: 48px; --unit-fluid-grid-primary-columns-2: 128px; --unit-fluid-grid-primary-columns-3: 208px; --unit-fluid-grid-primary-columns-4: 288px; --unit-fluid-grid-primary-columns-5: 288px; --unit-fluid-grid-primary-columns-6: 288px; --unit-fluid-grid-primary-columns-7: 288px; --unit-fluid-grid-primary-columns-8: 288px; --unit-fluid-grid-primary-columns-9: 288px; --unit-fluid-grid-primary-columns-10: 288px; --unit-fluid-grid-primary-columns-11: 288px; --unit-fluid-grid-primary-columns-12: 288px; --unit-fluid-grid-primary-columns-13: 288px; --unit-fluid-grid-primary-columns-14: 288px; --unit-fluid-grid-primary-columns-15: 288px; --unit-fluid-grid-primary-columns-16: 288px; /* --- Font / Fluid / Weight / Heading --- */ --font-fluid-weight-heading-1: var(--font-fixed-weight-heading-1); --font-fluid-weight-heading-2: var(--font-fixed-weight-heading-1); --font-fluid-weight-heading-3: var(--font-fixed-weight-heading-2); --font-fluid-weight-heading-4: var(--font-fixed-weight-heading-3); --font-fluid-weight-heading-5: var(--font-fixed-weight-heading-4); --font-fluid-weight-heading-6: var(--font-fixed-weight-heading-6); --font-fluid-weight-heading-7: var(--font-fixed-weight-heading-6); /* --- Font / Fluid / Size / Heading --- */ --font-fluid-size-heading-1: var(--font-fixed-size-heading-1); --font-fluid-size-heading-2: var(--font-fixed-size-heading-2); --font-fluid-size-heading-3: var(--font-fixed-size-heading-3); --font-fluid-size-heading-4: var(--font-fixed-size-heading-3); --font-fluid-size-heading-5: var(--font-fixed-size-heading-3); --font-fluid-size-heading-6: var(--font-fixed-size-heading-5); --font-fluid-size-heading-7: var(--font-fixed-size-heading-6); /* --- Font / Fluid / Line Height / Heading --- */ --font-fluid-lineheight-heading-1: var(--font-fixed-lineheight-header-1); --font-fluid-lineheight-heading-2: var(--font-fixed-lineheight-header-1); --font-fluid-lineheight-heading-3: var(--font-fixed-lineheight-header-2); --font-fluid-lineheight-heading-4: var(--font-fixed-lineheight-header-3); --font-fluid-lineheight-heading-5: var(--font-fixed-lineheight-header-4); --font-fluid-lineheight-heading-6: var(--font-fixed-lineheight-header-6); --font-fluid-lineheight-heading-7: var(--font-fixed-lineheight-header-6); /* --- Font / Fluid / Line Height / Heading / Compact --- */ --font-fluid-lineheight-heading-compact-1: var(--font-fixed-lineheight-header-1); --font-fluid-lineheight-heading-compact-2: var(--font-fixed-lineheight-header-1); /* --- Font / Fluid / Letter Spacing / Heading --- */ --font-fluid-letterspacing-heading-1: var(--font-fixed-letterspacing-heading-1); --font-fluid-letterspacing-heading-2: var(--font-fixed-letterspacing-heading-1); --font-fluid-letterspacing-heading-3: var(--font-fixed-letterspacing-heading-2); --font-fluid-letterspacing-heading-4: var(--font-fixed-letterspacing-heading-3); --font-fluid-letterspacing-heading-5: var(--font-fixed-letterspacing-heading-4); --font-fluid-letterspacing-heading-6: var(--font-fixed-letterspacing-heading-6); --font-fluid-letterspacing-heading-7: var(--font-fixed-letterspacing-heading-6); /* --- Forms / Standard --- */ --forms-standard-short: 140px; --forms-standard-default: 288px; --forms-standard-long: 288px; /* --- Forms / Siderail --- */ --forms-siderail-short: 140px; --forms-siderail-default: 288px; --forms-siderail-long: 288px; } /* -------------------------------------------------------------------------- Small (672–1055 px) -------------------------------------------------------------------------- */ @media (min-width: 672px) { :root { /* --- Frame --- */ --frame-x: 672px; /* --- Grid / Count --- */ --grid-count-primary: 8; --grid-count-nested: 8; --grid-count-forms: 8; /* --- Grid / Margin --- */ --grid-margin-primary: 32px; --grid-margin-nested: 24px; --grid-margin-forms: 24px; /* --- Grid / Gutter --- */ --grid-gutter-nested: 16px; --grid-gutter-forms: 12px; /* --- Unit / Fluid / General --- */ --unit-fluid-general-2: var(--unit-fixed-2); --unit-fluid-general-4: var(--unit-fixed-3); --unit-fluid-general-5: var(--unit-fixed-3); --unit-fluid-general-6: var(--unit-fixed-5); --unit-fluid-general-7: var(--unit-fixed-6); --unit-fluid-general-8: var(--unit-fixed-7); --unit-fluid-general-9: var(--unit-fixed-8); --unit-fluid-general-10: var(--unit-fixed-9); --unit-fluid-general-11: var(--unit-fixed-10); --unit-fluid-general-12: var(--unit-fixed-11); --unit-fluid-general-13: var(--unit-fixed-12); /* --- Unit / Fluid / Grid / Primary / Percentage --- */ --unit-fluid-grid-primary-percentage-25: 128px; --unit-fluid-grid-primary-percentage-50: 288px; --unit-fluid-grid-primary-percentage-75: 448px; --unit-fluid-grid-primary-percentage-100: 608px; /* --- Unit / Fluid / Grid / Primary / Columns --- */ --unit-fluid-grid-primary-columns-5: 368px; --unit-fluid-grid-primary-columns-6: 448px; --unit-fluid-grid-primary-columns-7: 528px; --unit-fluid-grid-primary-columns-8: 528px; --unit-fluid-grid-primary-columns-9: 608px; --unit-fluid-grid-primary-columns-10: 608px; --unit-fluid-grid-primary-columns-11: 608px; --unit-fluid-grid-primary-columns-12: 608px; --unit-fluid-grid-primary-columns-13: 608px; --unit-fluid-grid-primary-columns-14: 608px; --unit-fluid-grid-primary-columns-15: 608px; --unit-fluid-grid-primary-columns-16: 608px; /* --- Font / Fluid / Size / Heading --- */ --font-fluid-size-heading-5: var(--font-fixed-size-heading-4); /* --- Forms / Standard --- */ --forms-standard-short: 131px; --forms-standard-default: 274px; --forms-standard-long: 417px; /* --- Forms / Siderail --- */ --forms-siderail-short: 131px; --forms-siderail-default: 274px; --forms-siderail-long: 417px; } } /* -------------------------------------------------------------------------- Medium (1056–1311 px) -------------------------------------------------------------------------- */ @media (min-width: 1056px) { :root { /* --- Frame --- */ --frame-x: 1056px; /* --- Grid / Count --- */ --grid-count-primary: 16; --grid-count-nested: 12; --grid-count-forms: 12; /* --- Font / Fluid / Weight / Heading --- */ --font-fluid-weight-heading-2: var(--font-fixed-weight-heading-2); --font-fluid-weight-heading-3: var(--font-fixed-weight-heading-3); --font-fluid-weight-heading-4: var(--font-fixed-weight-heading-4); --font-fluid-weight-heading-5: var(--font-fixed-weight-heading-5); --font-fluid-weight-heading-7: var(--font-fixed-weight-heading-7); /* --- Font / Fluid / Size / Heading --- */ --font-fluid-size-heading-4: var(--font-fixed-size-heading-4); --font-fluid-size-heading-5: var(--font-fixed-size-heading-5); --font-fluid-size-heading-6: var(--font-fixed-size-heading-6); --font-fluid-size-heading-7: var(--font-fixed-size-heading-7); /* --- Font / Fluid / Line Height / Heading --- */ --font-fluid-lineheight-heading-2: var(--font-fixed-lineheight-header-2); --font-fluid-lineheight-heading-3: var(--font-fixed-lineheight-header-3); --font-fluid-lineheight-heading-4: var(--font-fixed-lineheight-header-4); --font-fluid-lineheight-heading-5: var(--font-fixed-lineheight-header-5); --font-fluid-lineheight-heading-7: var(--font-fixed-lineheight-header-7); /* --- Font / Fluid / Line Height / Heading / Compact --- */ --font-fluid-lineheight-heading-compact-2: var(--font-fixed-lineheight-header-2); /* --- Font / Fluid / Letter Spacing / Heading --- */ --font-fluid-letterspacing-heading-2: var(--font-fixed-letterspacing-heading-2); --font-fluid-letterspacing-heading-3: var(--font-fixed-letterspacing-heading-3); --font-fluid-letterspacing-heading-4: var(--font-fixed-letterspacing-heading-4); --font-fluid-letterspacing-heading-5: var(--font-fixed-letterspacing-heading-5); --font-fluid-letterspacing-heading-7: var(--font-fixed-letterspacing-heading-7); /* --- Unit / Fluid / General --- */ --unit-fluid-general-5: var(--unit-fixed-4); /* --- Unit / Fluid / Grid / Primary / Percentage --- */ --unit-fluid-grid-primary-percentage-25: 224px; --unit-fluid-grid-primary-percentage-50: 480px; --unit-fluid-grid-primary-percentage-75: 736px; --unit-fluid-grid-primary-percentage-100: 992px; /* --- Unit / Fluid / Grid / Primary / Columns --- */ --unit-fluid-grid-primary-columns-1: 32px; --unit-fluid-grid-primary-columns-2: 96px; --unit-fluid-grid-primary-columns-3: 160px; --unit-fluid-grid-primary-columns-4: 224px; --unit-fluid-grid-primary-columns-5: 288px; --unit-fluid-grid-primary-columns-6: 352px; --unit-fluid-grid-primary-columns-7: 416px; --unit-fluid-grid-primary-columns-8: 416px; --unit-fluid-grid-primary-columns-9: 544px; --unit-fluid-grid-primary-columns-10: 608px; --unit-fluid-grid-primary-columns-11: 672px; --unit-fluid-grid-primary-columns-12: 736px; --unit-fluid-grid-primary-columns-13: 800px; --unit-fluid-grid-primary-columns-14: 864px; --unit-fluid-grid-primary-columns-15: 928px; --unit-fluid-grid-primary-columns-16: 992px; /* --- Forms / Standard --- */ --forms-standard-short: 126px; --forms-standard-default: 264px; --forms-standard-long: 402px; /* --- Forms / Siderail --- */ --forms-siderail-short: 147px; --forms-siderail-default: 306px; --forms-siderail-long: 485px; } } /* -------------------------------------------------------------------------- Large (1312–1583 px) -------------------------------------------------------------------------- */ @media (min-width: 1312px) { :root { /* --- Frame --- */ --frame-x: 1312px; /* --- Unit / Fluid / General --- */ --unit-fluid-general-3: var(--unit-fixed-3); --unit-fluid-general-4: var(--unit-fixed-4); --unit-fluid-general-5: var(--unit-fixed-5); --unit-fluid-general-6: var(--unit-fixed-6); --unit-fluid-general-7: var(--unit-fixed-7); --unit-fluid-general-8: var(--unit-fixed-8); --unit-fluid-general-9: var(--unit-fixed-9); --unit-fluid-general-10: var(--unit-fixed-10); --unit-fluid-general-11: var(--unit-fixed-11); --unit-fluid-general-12: var(--unit-fixed-12); --unit-fluid-general-13: var(--unit-fixed-13); /* --- Unit / Fluid / Grid / Primary / Percentage --- */ --unit-fluid-grid-primary-percentage-25: 288px; --unit-fluid-grid-primary-percentage-50: 608px; --unit-fluid-grid-primary-percentage-75: 928px; --unit-fluid-grid-primary-percentage-100: 1248px; /* --- Unit / Fluid / Grid / Primary / Columns --- */ --unit-fluid-grid-primary-columns-1: 48px; --unit-fluid-grid-primary-columns-2: 128px; --unit-fluid-grid-primary-columns-3: 208px; --unit-fluid-grid-primary-columns-4: 288px; --unit-fluid-grid-primary-columns-5: 368px; --unit-fluid-grid-primary-columns-6: 448px; --unit-fluid-grid-primary-columns-7: 528px; --unit-fluid-grid-primary-columns-8: 528px; --unit-fluid-grid-primary-columns-9: 688px; --unit-fluid-grid-primary-columns-10: 768px; --unit-fluid-grid-primary-columns-11: 848px; --unit-fluid-grid-primary-columns-12: 928px; --unit-fluid-grid-primary-columns-13: 1008px; --unit-fluid-grid-primary-columns-14: 1088px; --unit-fluid-grid-primary-columns-15: 1168px; --unit-fluid-grid-primary-columns-16: 1248px; /* --- Forms / Standard --- */ --forms-standard-short: 163px; --forms-standard-default: 338px; --forms-standard-long: 514px; /* --- Forms / Siderail --- */ --forms-siderail-short: 123px; --forms-siderail-default: 258px; --forms-siderail-long: 394px; } } /* -------------------------------------------------------------------------- Extra Large / Default (1584–1783 px) -------------------------------------------------------------------------- */ @media (min-width: 1584px) { :root { /* --- Frame --- */ --frame-x: 1584px; /* --- Grid / Margin --- */ --grid-margin-primary: 40px; --grid-margin-nested: 32px; --grid-margin-forms: 32px; /* --- Unit / Fluid / Grid / Primary / Percentage --- */ --unit-fluid-grid-primary-percentage-25: 352px; --unit-fluid-grid-primary-percentage-50: 736px; --unit-fluid-grid-primary-percentage-75: 1120px; --unit-fluid-grid-primary-percentage-100: 1504px; /* --- Unit / Fluid / Grid / Primary / Columns --- */ --unit-fluid-grid-primary-columns-1: 64px; --unit-fluid-grid-primary-columns-2: 160px; --unit-fluid-grid-primary-columns-3: 256px; --unit-fluid-grid-primary-columns-4: 352px; --unit-fluid-grid-primary-columns-5: 448px; --unit-fluid-grid-primary-columns-6: 544px; --unit-fluid-grid-primary-columns-7: 640px; --unit-fluid-grid-primary-columns-8: 640px; --unit-fluid-grid-primary-columns-9: 832px; --unit-fluid-grid-primary-columns-10: 928px; --unit-fluid-grid-primary-columns-11: 1024px; --unit-fluid-grid-primary-columns-12: 1120px; --unit-fluid-grid-primary-columns-13: 1216px; --unit-fluid-grid-primary-columns-14: 1312px; --unit-fluid-grid-primary-columns-15: 1408px; --unit-fluid-grid-primary-columns-16: 1504px; /* --- Forms / Standard --- */ --forms-standard-short: 198px; --forms-standard-default: 408px; --forms-standard-long: 474px; /* --- Forms / Siderail --- */ --forms-siderail-short: 150px; --forms-siderail-default: 312px; --forms-siderail-long: 474px; } } /* -------------------------------------------------------------------------- Max (1784–1920 px) -------------------------------------------------------------------------- */ @media (min-width: 1784px) { :root { /* --- Frame --- */ --frame-x: 1920px; /* --- Grid / Margin --- */ --grid-margin-primary: 80px; /* --- Unit / Fluid / Grid / Primary / Percentage --- */ --unit-fluid-grid-primary-percentage-25: 416px; --unit-fluid-grid-primary-percentage-50: 864px; --unit-fluid-grid-primary-percentage-75: 1312px; --unit-fluid-grid-primary-percentage-100: 1760px; /* --- Unit / Fluid / Grid / Primary / Columns --- */ --unit-fluid-grid-primary-columns-1: 80px; --unit-fluid-grid-primary-columns-2: 192px; --unit-fluid-grid-primary-columns-3: 304px; --unit-fluid-grid-primary-columns-4: 416px; --unit-fluid-grid-primary-columns-5: 528px; --unit-fluid-grid-primary-columns-6: 640px; --unit-fluid-grid-primary-columns-7: 752px; --unit-fluid-grid-primary-columns-8: 752px; --unit-fluid-grid-primary-columns-9: 976px; --unit-fluid-grid-primary-columns-10: 1088px; --unit-fluid-grid-primary-columns-11: 1200px; --unit-fluid-grid-primary-columns-12: 1312px; --unit-fluid-grid-primary-columns-13: 1424px; --unit-fluid-grid-primary-columns-14: 1536px; --unit-fluid-grid-primary-columns-15: 1648px; --unit-fluid-grid-primary-columns-16: 1760px; /* --- Forms / Standard --- */ --forms-standard-short: 235px; --forms-standard-default: 482px; --forms-standard-long: 730px; /* --- Forms / Siderail --- */ --forms-siderail-short: 198px; --forms-siderail-default: 408px; --forms-siderail-long: 618px; } }