/* quell-light.css | A minimum viable logic - md: breakpoint starter | v1.0.0 */

/* layer order
- 0. quell-core.css (linked first in the html)
- 1. design tokens (:root)   
- 2. base styles
- 3. core components (card, btn, form-control, navbar)
- 4. essential utilities (flex, spacing, color, display)
- 5. single breakpoint (md:/ 768px) + 12-col flex grid
- 6. animations

Note: Load order for the complete system:
*
- quell-base.css > quell-core.css > quell-light.css (or quell.css) > quell-light.js (or quell.js)
*/

/* design tokens | single source of truth */

:root {

  /* brand colors | solid fallback */
  --color-primary:         #191970;
  --color-primary-light:   #35428f;
  --color-primary-dark:    #05052e;
  --color-secondary:       #35454f;
  --color-secondary-light: #4d616e;
  --color-accent:          #ff3d40;

  /* channel engines | for transparency logic */
  --color-primary-rgb:         25, 25, 112;
  --color-primary-oklch:       28.813% 0.14368 272.778;
  
  --color-primary-light-rgb:   53, 66, 143;
  --color-primary-light-oklch: 41.252% 0.12747 272.402;
  
  --color-primary-dark-rgb:    5, 5, 46;
  --color-primary-dark-oklch:  15.77% 0.08029 272.364;

  --color-secondary-rgb:       53, 69, 79;
  --color-secondary-oklch:     38.062% 0.02673 235.901;
  
  --color-secondary-light-rgb:   77, 97, 110;
  --color-secondary-light-oklch: 48.109% 0.03212 236.895;
  
  --color-accent-rgb:            255, 61, 64;
  --color-accent-oklch:          65.735% 0.2289 25.532;
}

/* modern upgrade */
@supports (color: oklch(0% 0 0)) {
  :root {

    /* brand colors */
    --color-primary:         oklch(var(--color-primary-oklch));
    --color-primary-light:   oklch(var(--color-primary-light-oklch));
    --color-primary-dark:    oklch(var(--color-primary-dark-oklch));
    --color-secondary:       oklch(var(--color-secondary-oklch));
    --color-secondary-light: oklch(var(--color-secondary-light-oklch));
    --color-accent:          oklch(var(--color-accent-oklch));
  }
}

:root {

  /* standard | solid fallback */
  --color-matte-white:  #f8f9fa;
  --color-matte-black:  #282828;
  --color-muted-grey:   #616b7e;
  --color-text-inverse: #f2f2f4;
  --color-text-primary: #191970;
  --color-text-body:    #35454f;
  --color-text-muted:   #657085;

  /* shadow */
  --shadow-black: oklch(10.668% 0.00001 271.152);

  /* channel engines | for transparency logic */

  --color-matte-white-rgb:    248, 249, 250;
  --color-matte-white-oklch:  98.164% 0.00181 249.244;

  --color-matte-black-rgb:    40, 40, 40;
  --color-matte-black-oklch:  27.685% 0.00003 271.152;
  
  --color-muted-grey-rgb:     97, 107, 126;
  --color-muted-grey-oklch:   52.629% 0.03245 263.298;
  
  --color-text-inverse-rgb:   242, 242, 244;
  --color-text-inverse-oklch: 96.172% 0.00276 285.761;

  --color-text-primary-rgb:   25, 25, 112;
  --color-text-primary-oklch: 28.813% 0.14368 272.778;

  --color-text-body-rgb:      53, 69, 79;
  --color-text-body-oklch:    38.062% 0.02673 235.901;

  --color-text-muted-rgb:     101, 112, 133;
  --color-text-muted-oklch:   54.364% 0.03556 263.367;

  --shadow-black-rgb:         4, 4, 4;
  --shadow-black-oklch:       10.668% 0.00001 271.152; 
}

/* modern upgrade */
@supports (color: oklch(0% 0 0)) {
  :root {
    
    /* standard */
    --color-matte-white:  oklch(var(--color-matte-white-oklch));
    --color-matte-black:  oklch(var(--color-matte-black-oklch));
    --color-muted-grey:   oklch(var(--color-muted-grey-oklch)); 
    --color-text-inverse: oklch(var(--color-text-inverse-oklch));
    --shadow-black:       oklch(var(--shadow-black-oklch));
  }
}

:root {

  /* grey scale | solid fallback */
  --color-lighter-grey: #eeeeee;
  --color-light-grey:   #dddddd;
  --color-grey:         #cccccc;

  /* channel engines | for transparency logic */
  --color-lighter-grey-rgb:   238, 238, 238;
  --color-lighter-grey-oklch: 94.912% 0.00011 271.152;

  --color-light-grey-rgb:     221, 221, 221;
  --color-light-grey-oklch:   89.755% 0.0001 271.152;

  --color-grey-rgb:           204, 204, 204;
  --color-grey-oklch:         84.522% 0.0001 271.152; 
}

/* modern upgrade */
@supports (color: oklch(0% 0 0)) {
  :root {

    /* grey scale */
    --color-lighter-grey: oklch(var(--color-lighter-grey-oklch));
    --color-light-grey:   oklch(var(--color-light-grey-oklch));
    --color-grey:         oklch(var(--color-grey-oklch));
  }
}

:root {

  /* backgrounds | solid fallback */
  --color-bg-light:     #f4f7f9;
  --color-bg-dark:      #05052e;
  --color-surface:      #f2f2f4;
  --color-surface-dark: #121245;

  /* channel engines | for transparency logic */

  --color-bg-light-rgb:       244, 247, 249;
  --color-bg-light-oklch:     97.443% 0.00427 237.348;

  --color-bg-dark-rgb:        5, 5, 46;
  --color-bg-dark-oklch:      15.77% 0.08029 272.364;

  --color-surface-rgb:        242, 242, 249;
  --color-surface-oklch:      96.172% 0.00276 285.761;

  --color-surface-dark-rgb:   18, 18, 69;
  --color-surface-dark-oklch: 22.269% 0.09294 275.79;
}

/* modern upgrade */
@supports (color: oklch(0% 0 0)) {
  :root {

    /* backgrounds */
    --color-bg-light:     oklch(var(--color-bg-light-oklch));
    --color-bg-dark:      oklch(var(--color-bg-dark-oklch));
    --color-surface:      oklch(var(--color-surface-oklch));
    --color-surface-dark: oklch(var(--color-surface-dark-oklch));
  }
}

:root {

  /* opacity scale */
  --alpha-xs:  0.1;     /* ghost | very subtle row highlights*/
  --alpha-sm:  0.125;   /* large background card tints*/
  --alpha-md:  0.4;     /* lighter */
  --alpha-lg:  0.6;     /* light   */
  --alpha-xl:  0.8;     /* accent  */

  /* UI Feedback | Solid Fallback */
  --color-success:  rgb(40, 167, 69);
  --color-info:     #17a2b8;
  --color-warning:  #ffda07;
  --color-error:    #dc3545;

  /* success | Channel Engines | for transparency logic */
  --color-success-rgb: 40, 167, 69;
  --color-success-oklch: 64.014% 0.17505 146.763;

  /* success | Fallback using local alphas */
  --color-success-lighter: rgba(var(--color-success-rgb), var(--alpha-md));
  --color-success-light:   rgba(var(--color-success-rgb), var(--alpha-lg));
  --color-success-accent:  rgba(var(--color-success-rgb), var(--alpha-xl));

  /* info | Channel Engines | for transparency logic */
  --color-info-rgb:        23, 162, 184;
  --color-info-oklch:      65.525% 0.11051 212.203;

  /* info | Fallback using local alphas */
  --color-info-lighter:    rgba(var(--color-info-rgb), var(--alpha-md));
  --color-info-light:      rgba(var(--color-info-rgb), var(--alpha-lg));
  --color-info-accent:     rgba(var(--color-info-rgb), var(--alpha-xl));

  /* warning |Channel Engines | for transparency logic */
  --color-warning-rgb:     255, 218, 7;
  --color-warning-oklch:   89.28% 0.18303 96.549;

  /* warning | Fallback using local alphas */
  --color-warning-lighter: rgba(var(--color-warning-rgb), var(--alpha-md));
  --color-warning-light:   rgba(var(--color-warning-rgb), var(--alpha-lg));
  --color-warning-accent:  rgba(var(--color-warning-rgb), var(--alpha-xl));

  /* error | Channel Engines | for transparency logic */
  --color-error-rgb:       220, 53, 69;
  --color-error-oklch:     59.153% 0.20203 21.222;

  /* error | Fallback using local alphas */
  --color-error-lighter:  rgba(var(--color-error-rgb), var(--alpha-md));
  --color-error-light:    rgba(var(--color-error-rgb), var(--alpha-lg));
  --color-error-accent:   rgba(var(--color-error-rgb), var(--alpha-xl));
}

@supports (color: oklch(0% 0 0)) {
  :root {

    /* UI feedback */
    --color-success:         oklch(var(--color-success-oklch));
    --color-success-lighter: oklch(var(--color-success-oklch) / var(--alpha-md));
    --color-success-light:   oklch(var(--color-success-oklch) / var(--alpha-lg));
    --color-success-accent:  oklch(var(--color-success-oklch) / var(--alpha-xl));
    
    --color-info:         oklch(var(--color-info-oklch));
    --color-info-lighter: oklch(var(--color-info-oklch) / var(--alpha-md));
    --color-info-light:   oklch(var(--color-info-oklch) / var(--alpha-lg));
    --color-info-accent:  oklch(var(--color-info-oklch) / var(--alpha-xl));

    --color-warning:          oklch(var(--color-warning-oklch));
    --color-warning-lighter:  oklch(var(--color-warning-oklch) / var(--alpha-md));
    --color-warning-light:    oklch(var(--color-warning-oklch) / var(--alpha-lg));
    --color-warning-accent:   oklch(var(--color-warning-oklch) / var(--alpha-xl));

    --color-error:         oklch(var(--color-error-oklch));
    --color-error-lighter: oklch(var(--color-error-oklch) / var(--alpha-md));
    --color-error-light:   oklch(var(--color-error-oklch) / var(--alpha-lg));
    --color-error-accent:  oklch(var(--color-error-oklch) / var(--alpha-xl));
  }
}

:root {

  /* Design Tokens | Typography Scale + Line Heights */

  /* font-family */
  --font-fam-primary:   "Nunito", "Calibri", "Trebuchet MS", sans-serif;
  --font-fam-secondary: "Fraunces", "Georgia", "Garamond", "Times New Roman", serif;
  --font-fam-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular,"Cascadia Code", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* font size scale | major third (1.250 ratio) */
  --font-size-xs:   0.64rem;
  --font-size-sm:   0.8rem;
  --font-size-base: 1rem;
  --font-size-md:   1.25rem;
  --font-size-lg:   1.563rem;
  --font-size-xl:   1.953rem;
  --font-size-xxl:  2.441rem;
  --font-size-xxxl: 3.052rem;

  /* fluid heading sizes | zoom-safe */
  --font-size-h1: clamp(2.441rem, 1.5rem + 3.2vw, 3.052rem);
  --font-size-h2: clamp(1.953rem, 1.3rem + 2.5vw, 2.441rem);
  --font-size-h3: clamp(1.563rem, 1.1rem + 1.9vw, 1.953rem);
  --font-size-h4: clamp(1.25rem,  0.9rem + 1.4vw, 1.563rem);
  --font-size-h5: clamp(0.8rem,   0.7rem + 0.8vw, 1rem);
  --font-size-h6: clamp(0.64rem,  0.6rem + 0.4vw, 0.8rem);

  /* line heights */
  --line-height-h1:   1.1;
  --line-height-h2:   1.2;
  --line-height-h3:   1.3;
  --line-height-h4:   1.4;
  --line-height-h5:   1.5;
  --line-height-h6:   1.5;
  --line-height-base: 1.6;

  /* spacing scale - 1.5x ratio */
  --spacing-xxs:  0.25rem;
  --spacing-xs:   0.375rem;
  --spacing-sm:   0.5625rem;
  --spacing-md:   0.843rem;
  --spacing-lg:   1.265rem;
  --spacing-xl:   1.898rem;
  --spacing-xxl:  2.848rem;
  --spacing-xxxl: 4.272rem;

  /* negative spacing - same scale | negative values */
  --spacing-neg-xxs:  -0.25rem;
  --spacing-neg-xs:   -0.375rem;
  --spacing-neg-sm:   -0.5625rem;
  --spacing-neg-md:   -0.843rem;
  --spacing-neg-lg:   -1.265rem;
  --spacing-neg-xl:   -1.898rem;
  --spacing-neg-xxl:  -2.848rem;
  --spacing-neg-xxxl: -4.272rem;

  /* border widths */
  --border-width-sm: 0.0625rem;  /* 1px — subtle dividers */
  --border-width-md: 0.125rem;   /* 2px — form inputs, focus rings */
  --border-width-lg: 0.25rem;    /* 4px — accent borders */
  --border-width-xl: 0.5rem;     /* 8px — bold decorative */

  /* border radius */
  --border-radius-sm:     0.25rem;
  --border-radius-md:     0.5rem;
  --border-radius-lg:     0.75rem;
  --border-radius-xl:     1rem;
  --border-radius-circle: 50%;

  /* border styles */
  --border-solid:  solid;
  --border-dotted: dotted;
  --border-dashed: dashed;
  --border-double: double;
  --border-groove: groove;
  --border-ridge:  ridge;
  --border-inset:  inset;
  --border-outset: outset;
  
  /*  Note: ======================================================================================================== 
    - Use --shadow-* for visual lift. 
    - Use --shadow-elevation-* with semantic intent. 
    - Use --shadow-inset-* for pressed or recessed states. 
    - They are not interchangeable.
  ==================================================================================================================*/
  
  /* box shadow */
  --shadow-sm:
  0 var(--spacing-xs) var(--spacing-sm) var(--spacing-neg-xxs) oklch(var(--shadow-black-oklch) / var(--alpha-xs));

  --shadow-md:
  0 var(--spacing-sm) var(--spacing-md) var(--spacing-neg-xs) oklch(var(--shadow-black-oklch) / var(--alpha-sm));

  --shadow-lg:
  0 var(--spacing-md) var(--spacing-lg) var(--spacing-neg-sm) oklch(var(--shadow-black-oklch) / var(--alpha-md));

  --shadow-xl:
  0 var(--spacing-lg) var(--spacing-xl) var(--spacing-neg-md) oklch(var(--shadow-black-oklch) / var(--alpha-lg));

  /* semantic elevation | surface depth layers */
  --shadow-elevation-sm:
  0 var(--spacing-xxs) var(--spacing-xs) var(--spacing-neg-xxs) oklch(var(--shadow-black-oklch) / var(--alpha-xs)),
  0 var(--spacing-xs)  var(--spacing-sm) var(--spacing-neg-xxs) oklch(var(--shadow-black-oklch) / var(--alpha-sm));

  --shadow-elevation-md:
  0 var(--spacing-xs)  var(--spacing-sm) var(--spacing-neg-xxs) oklch(var(--shadow-black-oklch) / var(--alpha-sm)),
  0 var(--spacing-sm)  var(--spacing-md) var(--spacing-neg-xs) oklch(var(--shadow-black-oklch) / var(--alpha-md));

  --shadow-elevation-lg:
  0 var(--spacing-sm)  var(--spacing-md) var(--spacing-neg-xs) oklch(var(--shadow-black-oklch) / var(--alpha-md)),
  0 var(--spacing-md)  var(--spacing-lg) var(--spacing-neg-sm) oklch(var(--shadow-black-oklch) / var(--alpha-lg));

  --shadow-elevation-xl: 
  0 var(--spacing-md)  var(--spacing-lg) var(--spacing-neg-sm) oklch(var(--shadow-black-oklch) / var(--alpha-lg)),
  0 var(--spacing-lg)  var(--spacing-xl) var(--spacing-neg-md) oklch(var(--shadow-black-oklch) / var(--alpha-xl));

  /* inset shadows | pressed / sunken surfaces */
  --shadow-inset-sm: inset 0 var(--spacing-xxs) var(--spacing-xs) oklch(var(--shadow-black-oklch) / var(--alpha-xs));

  --shadow-inset-md: inset 0 var(--spacing-xs)  var(--spacing-sm) oklch(var(--shadow-black-oklch) / var(--alpha-sm));

  --shadow-inset-lg: inset 0 var(--spacing-sm)  var(--spacing-md) oklch(var(--shadow-black-oklch) / var(--alpha-md));

  --shadow-inset-xl: inset 0 var(--spacing-md)  var(--spacing-lg) oklch(var(--shadow-black-oklch) / var(--alpha-lg));

  /* z-index stacking */
  --z-index-hide:     -1;
  --z-index-default:  1;
  --z-index-elevated: 10;
  --z-index-sticky:   100;
  --z-index-overlay:  1000;
  --z-index-modal:    1010;

  /* layouts */
  --container-width:       90rem;
  --container-fluid-width: 100%;

  /* powers the 12-col flex grid */
  --one-twelfth:           8.333333%;   

  /* cards */
  --card-width:       22.5rem;
  --card-fluid-width: 100%;
  --card-image:       100%;
  
  /* icon */
  --icon-base: 10rem;

  /* transitions */
  --transition-speed-fast:   0.15s;
  --transition-speed-normal: 0.3s;
  --transition-speed-slow:   0.5s;
  --transition-ease:         ease-in-out;

  /* animations */
  --animation-fade-in:  fadeIn  var(--transition-speed-normal) var(--transition-ease) forwards;
  --animation-slide-up: slideUp var(--transition-speed-normal) var(--transition-ease) forwards;

  /* min width */
  --min-width-default: 15rem;

}

/* default | animation keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(1.25rem); opacity: 0; }
  to   { transform: translateY(0);       opacity: 1; }
}

/* base styles | body + headings */
body {
  font-family:      var(--font-fam-primary);
  font-size:        var(--font-size-base);
  line-height:      var(--line-height-base);
  color:            var(--color-text-body);
  background-color: var(--color-bg-light);
}

/* headings using Fraunces (secondary font */
h1, h2, h3, h4, h5, h6 {
  font-family:   var(--font-fam-secondary);
  color:         var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

/* fluid headings | zoom safe */
h1, .h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); }
h2, .h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
h3, .h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
h4, .h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
h5, .h5 { font-size: var(--font-size-h5); line-height: var(--line-height-h5); }
h6, .h6 { font-size: var(--font-size-h6); line-height: var(--line-height-h6); }

/* base style | paragraph, lists, links + focus  */
p {
  font-size:     var(--font-size-base);
  line-height:   var(--line-height-base);
  margin-bottom: var(--spacing-md);
}

ul, ol {
  margin: 0;
  padding-left:  var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

ul { list-style:    disc; }
ol { list-style:    decimal; }
.navbar-nav li { margin-bottom: var(--spacing-md); list-style: none; }

a       { color: var(--color-primary-light); text-decoration: none; }
a:hover { color: var(--color-accent); }
a:focus {
  outline-offset:   var(--spacing-xxs);
  box-shadow: 0 0 0 var(--border-radius-md) var(--color-primary-light);
  border-radius:    var(--border-radius-sm);
}

/* Base color utility classes | text, background, border, UI feedback */

/*text colors */
.text-heading   { color: var(--color-primary); }
.text-body      { color: var(--color-text-body); }
.text-on-accent { color: var(--color-text-inverse); }
.text-muted     { color: var(--color-muted-grey); }
.text-success   { color: var(--color-success); }
.text-info      { color: var(--color-info); }
.text-warning   { color: var(--color-warning); }
.text-error     { color: var(--color-error); }

/* background colors | bg-dark, primary, accent force white text */
.bg-light         { background-color: var(--color-bg-light); }
.bg-dark          { background-color: var(--color-primary-dark); color: var(--color-matte-white); }
.bg-primary       { background-color: var(--color-primary); color: var(--color-matte-white); }
.bg-accent        { background-color: var(--color-accent); color: var(--color-matte-white); }
.bg-surface       { background-color: var(--color-surface); }
.bg-primary-light { background: var(--color-primary-light); color: var(--color-matte-white); }
.bg-secondary     { background-color: var(--color-secondary); color: var(--color-matte-white); }

/* UI feedback backgrounds | success, info, warning, error | standard, lighter, light, accent variants */

/* success */
.bg-success         { background-color: var(--color-success);  color: var(--color-matte-white); }
.bg-success-light   { background-color: var(--color-success-light); }
.bg-success-lighter { background-color: var(--color-success-lighter); }
.bg-success-accent  { background-color: var(--color-success-accent); }

/* info */
.bg-info          { background-color: var(--color-info);  color: var(--color-matte-white); }
.bg-info-light    { background-color: var(--color-info-light); }
.bg-info-lighter  { background-color: var(--color-info-lighter); }
.bg-info-accent   { background-color: var(--color-info-accent); }

/* warning */
.bg-warning         { background-color: var(--color-warning); color: var(--color-matte-black); }
.bg-warning-light   { background-color: var(--color-warning-light); }
.bg-warning-lighter { background-color: var(--color-warning-lighter); }
.bg-warning-accent  { background-color: var(--color-warning-accent); }

/* error */
.bg-error         { background-color: var(--color-error); color: var(--color-matte-white); }
.bg-error-light   { background-color: var(--color-error-light); }
.bg-error-lighter { background-color: var(--color-error-lighter); }
.bg-error-accent  { background-color: var(--color-error-accent); }

/* UI feedback borders */
.border-success { border-color: var(--color-success); }
.border-info    { border-color: var(--color-info); }
.border-warning { border-color: var(--color-warning); }
.border-error   { border-color: var(--color-error); }

/* layout | container + container fluid */

/* layout and components */
.container {
  max-width: var(--container-width);
  margin:    0 auto;
  padding:   0 var(--spacing-md);
}

.container-fluid {
  width:   var(--container-fluid-width);
  padding: 0 var(--spacing-md);
}

/* layout | card component */

/* card */
.card {
  width:            var(--card-width);
  background-color: var(--color-surface);
  border-radius:    var(--border-radius-md);
  padding:          var(--spacing-lg);
  box-shadow:       var(--shadow-md);
}

.card-header {
  padding:       var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  border-bottom: var(--border-width-sm) solid var(--color-primary-light); 
}

.card-body { padding: var(--spacing-md); }

.card-img  {
  width:   var(--card-image);
  height:  auto;
  display: block;
  border-top-left-radius:  var(--border-radius-md);
  border-top-right-radius: var(--border-radius-md);
}

/* Navigation | navbar + brand + hamburger toggle */

/* nav */
.navbar {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  padding:          var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-primary-light);
  position:         relative;
}

.navbar-brand {
  font-weight:     bold;
  font-size:       var(--font-size-h5);
  text-decoration: none;
  color:           var(--color-matte-white);
}

/* hamburger toggle | 3 spans become the 3 bars */
.nav-toggle {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  width:           var(--spacing-lg);
  height:          var(--spacing-lg);
  padding:         0;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  gap:             4px;
}

.nav-toggle span {
  display:          block;
  width:            100%;
  height:           var(--spacing-xxs);
  background-color: var(--color-surface);
  border-radius:    2px;
  transition:       transform var(--transition-speed-fast)  var(--transition-ease),
                    opacity   var(--transition-speed-fast)  var(--transition-ease); 
}

/* Navigation | navbar-nav + nav-links (mobile-first) */

/* mobile-first: nav hidden until .is-open is added by JS */
.navbar-nav {
  display:          none;
  list-style:       none;
  margin:           0;
  padding:          0;
  flex-direction:   column;
  background-color: var(--color-primary-dark);
  width:            100%;
  position:         absolute;
  top:              100%;
  left:             0;
  z-index:          var(--z-index-elevated);
  box-shadow:       var(--shadow-md);
}

.navbar-nav.is-open { display: flex; }

.nav-item           { padding: var(--spacing-sm);}

.nav-link {
  color:           var(--color-matte-white);
  text-decoration: none;
  transition:      color var(--transition-speed-fast) var(--transition-ease);
}

.nav-link:hover,
.nav-link:focus   { color: var(--color-accent); }

/* on md+ screens: hide toggle, show nav inline */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .navbar-nav {
    display:        flex;
    position:       static;
    flex-direction: row;
    background:     transparent;
    width:          auto;
    box-shadow:     none;
  }
  .nav-item   { border-bottom: none; padding: 0 var(--spacing-sm); }
}

/* Components */

/* components | alert 4 states + close button */
.alert {
  padding:         var(--spacing-md);
  margin-bottom:   var(--spacing-md);
  border:          var(--border-width-sm) solid transparent;
  border-radius:   var(--border-radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.alert-message { flex-grow: 1; }
.alert-close {
  background:  none;
  border:      none;
  font-size:   var(--font-size-lg);
  cursor:      pointer;
  margin-left: var(--spacing-md);
}

.alert-success { color: var(--color-matte-white); background-color: var(--color-success); border-color: var(--color-success); }
.alert-info    { color: var(--color-matte-white); background-color: var(--color-info);    border-color: var(--color-info); }

/* Warning uses --color-secondary (dark-text) this is intentional WCAG contrast-gold backgrounds fail with white text. Do not change it. */
.alert-warning { color: var(--color-secondary);   background-color: var(--color-warning); border-color: var(--color-warning); font-weight: bolder; }

.alert-error   { color: var(--color-matte-white); background-color: var(--color-error);   border-color: var(--color-error); }

/* components | button base + size variants */
.btn {
  display:         inline-block;
  font-family:     var(--font-fam-primary);
  font-size:       var(--font-size-base);
  line-height:     var(--line-height-h5);
  text-align:      center;
  text-decoration: none;
  vertical-align:  middle;
  cursor:          pointer;
  user-select:     none;
  border:          var(--border-width-sm) solid transparent;
  padding:         var(--spacing-sm) var(--spacing-md);
  border-radius:               var(--border-radius-sm);
  transition: background-color var(--transition-speed-fast),
              border-color     var(--transition-speed-fast),
              color            var(--transition-speed-fast),
              box-shadow       var(--transition-speed-fast);
}

.btn:hover    { background-color: var(--color-primary-light); color: var(--color-matte-white); }
.btn:active   { background-color: var(--color-primary); }
.btn:focus    { outline: var(--border-width-md) solid var(--color-accent); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.btn-sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); }
.btn-md { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); }
.btn-lg { padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-md); }

/*  components | button solid variants */
.btn-primary         { background-color: var(--color-primary); color: var(--color-matte-white); border-color: var(--color-primary); }
.btn-primary:hover   { background-color: var(--color-primary-light); border-color: var(--color-primary-light); }

.btn-secondary       { background-color: var(--color-secondary); color: var(--color-matte-white); border-color: var(--color-secondary); }
.btn-secondary:hover { background-color: var(--color-secondary-light); border-color: var(--color-secondary-light); }

.btn-accent          { background-color: var(--color-accent); color: var(--color-matte-white); border-color: var(--color-accent); }
.btn-accent:hover    { background-color: oklch(var(--color-accent-oklch) / var(--alpha-lg)); border-color: oklch(var(--color-accent-oklch) / var(--alpha-xl)); }

.btn-success         { background-color: var(--color-success); color: var(--color-matte-white); border-color: var(--color-success); }
.btn-success:hover   { background-color: oklch(var(--color-success-oklch) / var(--alpha-xl)); border-color: oklch(var(--color-success-oklch) / var(--alpha-xl)); }

.btn-info            { background-color: var(--color-info); color: var(--color-matte-white); border-color: var(--color-info); }
.btn-info:hover      { background-color: oklch(var(--color-info-oklch) / var(--alpha-xl)); border-color: oklch(var(--color-info-oklch) / var(--alpha-xl)); }

/* Note: .btn-warning uses dark text — same WCAG contrast rule as alerts */
.btn-warning         { background-color: var(--color-warning); color: var(--color-secondary); font-weight: bold; border-color: var(--color-warning); }
.btn-warning:hover   { background-color: oklch(var(--color-warning-oklch) / var(--alpha-xl)); border-color: oklch(var(--color-warning-oklch) / var(--alpha-xl)); }

.btn-error           { background-color: var(--color-error); color: var(--color-matte-white); border-color: var(--color-error); }
.btn-error:hover     { background-color: oklch(var(--color-error-oklch) / var(--alpha-xl)); border-color: oklch(var(--color-error-oklch) / var(--alpha-xl)); }

/* components | button outline variants */

/* base outline */
.btn-outline {
  background-color: transparent;
  border:           var(--border-width-sm) solid var(--color-primary);
  color:            var(--color-primary);
  transition:   all var(--transition-speed-normal) var(--transition-ease);
}

.btn-outline:hover { background-color: var(--color-primary); color: var(--color-text-inverse); }
.btn-outline:focus { outline: var(--border-width-md) solid var(--color-accent); outline-offset: var(--border-width-md); }

/* outline brand variants */
.btn-outline-primary     { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); color: var(--color-text-inverse); }
.btn-outline-primary:focus { outline: var(--border-width-md) solid var(--color-primary); outline-offset: var(--border-width-md); }

.btn-outline-secondary     { border-color: var(--color-secondary); color: var(--color-secondary); }
.btn-outline-secondary:hover { background-color: var(--color-secondary); color: var(--color-text-inverse); }
.btn-outline-secondary:focus { outline: var(--border-width-md) solid var(--color-secondary); outline-offset: var(--border-width-md); }

.btn-outline-accent     { border-color: var(--color-accent); color: var(--color-accent);   }
.btn-outline-accent:hover { background-color: var(--color-accent); color: var(--color-text-inverse);   }
.btn-outline-accent:focus { outline: var(--border-width-md) solid var(--color-accent); outline-offset: var(--border-width-md); }

/* outline UI feedback variants */
.btn-outline-success     { border-color: var(--color-success); color: var(--color-success);  }
.btn-outline-success:hover { background-color: var(--color-success); color: var(--color-text-inverse);   }
.btn-outline-success:focus { outline: var(--border-width-md) solid var(--color-success); outline-offset: var(--border-width-md); }

.btn-outline-info     { border-color: var(--color-info); color: var(--color-info);     }
.btn-outline-info:hover { background-color: var(--color-info); color: var(--color-text-inverse);   }
.btn-outline-info:focus { outline: var(--border-width-md) solid var(--color-info); outline-offset: var(--border-width-md); }

/* Note: .btn-warning uses dark text — same WCAG contrast rule as alerts, solid buttons */ 
.btn-outline-warning     { border-color: var(--color-warning); color: var(--color-warning);    }
.btn-outline-warning:hover { background-color: var(--color-warning); color: var(--color-secondary); font-weight: bold; }
.btn-outline-warning:focus { outline: var(--border-width-md) solid var(--color-warning); outline-offset: var(--border-width-md); }

.btn-outline-error     { border-color: var(--color-error); color: var(--color-error);    }
.btn-outline-error:hover { background-color: var(--color-error); color: var(--color-text-inverse); }
.btn-outline-error:focus { outline: var(--border-width-md) solid var(--color-error); outline-offset: var(--border-width-md); }

/* Components | form control base + size + disable */

/* form control base */
.form-control {
  display:          block;
  width:            100%;
  padding:          var(--spacing-sm);
  font-size:        var(--font-size-base);
  line-height:      var(--line-height-base);
  color:            var(--color-text-body);
  background-color: var(--color-surface);
  background-clip:  padding-box;
  border:           var(--border-width-md) solid var(--color-grey);
  border-radius:    var(--border-radius-sm);
  appearance:       none;
  transition:       border-color var(--transition-speed-normal) var(--transition-ease),
                    box-shadow   var(--transition-speed-normal) var(--transition-ease);
}

.form-control:focus {
  border-color: var(--color-primary-light);
  outline:      none;
  box-shadow:   0 0 0 3px oklch(var(--color-primary-light-oklch) / var(--alpha-sm));
}

.form-control:disabled {
  background-color: var(--color-lighter-grey);
  cursor:           not-allowed;
}

.form-control-sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); }
.form-control-lg { padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-lg); }

/* Utility Spacing (1.5x ratio) | margin, padding, gap, (property + direction + size) full scale + negatives  */

.mx-auto  { margin: 0 auto; }
.mar-0    { margin: 0;      }
.pad-0    {padding: 0;      }

/* margin | xxs 0.25rem */
.m-xxs   { margin:        var(--spacing-xxs); }
.mt-xxs  { margin-top:    var(--spacing-xxs); }
.mr-xxs  { margin-right:  var(--spacing-xxs); }
.mb-xxs  { margin-bottom: var(--spacing-xxs); }
.ml-xxs  { margin-left:   var(--spacing-xxs); }
.my-xxs  { margin-top:    var(--spacing-xxs); margin-bottom: var(--spacing-xxs); }
.mx-xxs  { margin-left:   var(--spacing-xxs); margin-right:  var(--spacing-xxs); }

/* margin | negative -0.25rem */
.m-neg-xxs  { margin:        var(--spacing-neg-xxs); }
.mt-neg-xxs { margin-top:    var(--spacing-neg-xxs); } 
.mr-neg-xxs { margin-right:  var(--spacing-neg-xxs); }
.mb-neg-xxs { margin-bottom: var(--spacing-neg-xxs); }
.ml-neg-xxs { margin-left:   var(--spacing-neg-xxs); }
.my-neg-xxs { margin-top:    var(--spacing-neg-xxs); margin-bottom: var(--spacing-neg-xxs); }
.mx-neg-xxs { margin-left:   var(--spacing-neg-xxs); margin-right:  var(--spacing-neg-xxs); }

/* padding | xxs 0.25rem */
.p-xxs   { padding:        var(--spacing-xxs); }
.pt-xxs  { padding-top:    var(--spacing-xxs); }
.pr-xxs  { padding-right:  var(--spacing-xxs); }
.pb-xxs  { padding-bottom: var(--spacing-xxs); }
.pl-xxs  { padding-left:   var(--spacing-xxs); }
.py-xxs  { padding-top:    var(--spacing-xxs); padding-bottom: var(--spacing-xxs); }
.px-xxs  { padding-left:   var(--spacing-xxs); padding-right:  var(--spacing-xxs); }

.gap-xxs { gap: var(--spacing-xxs); }

/* margin | xs 0.375rem */
.m-xs   { margin:        var(--spacing-xs); }
.mt-xs  { margin-top:    var(--spacing-xs); }
.mr-xs  { margin-right:  var(--spacing-xs); }
.mb-xs  { margin-bottom: var(--spacing-xs); }
.ml-xs  { margin-left:   var(--spacing-xs); }
.my-xs  { margin-top:    var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.mx-xs  { margin-left:   var(--spacing-xs); margin-right:  var(--spacing-xs); }

/* margin | negative -0.375rem */
.m-neg-xs  { margin:        var(--spacing-neg-xs); }
.mt-neg-xs { margin-top:    var(--spacing-neg-xs); }
.mr-neg-xs { margin-right:  var(--spacing-neg-xs); }
.mb-neg-xs { margin-bottom: var(--spacing-neg-xs); }
.ml-neg-xs { margin-left:   var(--spacing-neg-xs); }
.my-neg-xs { margin-top:    var(--spacing-neg-xs); margin-bottom: var(--spacing-neg-xs); }
.mx-neg-xs { margin-left:   var(--spacing-neg-xs); margin-right:  var(--spacing-neg-xs); }

/* padding | xs 0.375rem */
.p-xs   { padding:        var(--spacing-xs); }
.pt-xs  { padding-top:    var(--spacing-xs); }
.pr-xs  { padding-right:  var(--spacing-xs); }
.pb-xs  { padding-bottom: var(--spacing-xs); }
.pl-xs  { padding-left:   var(--spacing-xs); }
.py-xs  { padding-top:    var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.px-xs  { padding-left:   var(--spacing-xs); padding-right:  var(--spacing-xs); }

.gap-xs { gap: var(--spacing-xs); }

/* margin | sm 0.5625rem */
.m-sm  { margin:        var(--spacing-sm); }
.mt-sm { margin-top:    var(--spacing-sm); }
.mr-sm { margin-right:  var(--spacing-sm); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.ml-sm { margin-left:   var(--spacing-sm); }
.my-sm { margin-top:    var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.mx-sm { margin-left:   var(--spacing-sm); margin-right:  var(--spacing-sm); }

/* margin | negative -0.5625rem */
.m-neg-sm  { margin:        var(--spacing-neg-sm); }
.mt-neg-sm { margin-top:    var(--spacing-neg-sm); }
.mr-neg-sm { margin-right:  var(--spacing-neg-sm); }
.mb-neg-sm { margin-bottom: var(--spacing-neg-sm); }
.ml-neg-sm { margin-left:   var(--spacing-neg-sm); }
.my-neg-sm { margin-top:    var(--spacing-neg-sm); margin-bottom: var(--spacing-neg-sm); }
.mx-neg-sm { margin-left:   var(--spacing-neg-sm); margin-right:  var(--spacing-neg-sm); }

/* padding | sm 0.5625rem */
.p-sm   { padding:        var(--spacing-sm); }
.pt-sm  { padding-top:    var(--spacing-sm); }
.pr-sm  { padding-right:  var(--spacing-sm); }
.pb-sm  { padding-bottom: var(--spacing-sm); }
.pl-sm  { padding-left:   var(--spacing-sm); }
.py-sm  { padding-top:    var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.px-sm  { padding-left:   var(--spacing-sm); padding-right:  var(--spacing-sm); }

.gap-sm { gap: var(--spacing-sm); }

/* margin | md 0.843rem */
.m-md  { margin:        var(--spacing-md); }
.mt-md { margin-top:    var(--spacing-md); }
.mr-md { margin-right:  var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); } 
.ml-md { margin-left:   var(--spacing-md); }
.my-md { margin-top:    var(--spacing-md); margin-bottom: var(--spacing-md); }
.mx-md { margin-left:   var(--spacing-md); margin-right:  var(--spacing-md); }

/* margin | negative -0.843rem */
.m-neg-md  { margin:        var(--spacing-neg-md); }
.mt-neg-md { margin-top:    var(--spacing-neg-md); }
.mr-neg-md { margin-right:  var(--spacing-neg-md); }
.mb-neg-md { margin-bottom: var(--spacing-neg-md); }
.ml-neg-md { margin-left:   var(--spacing-neg-md); }
.my-neg-md { margin-top:    var(--spacing-neg-md); margin-bottom: var(--spacing-neg-md); }
.mx-neg-md { margin-left:   var(--spacing-neg-md); margin-right:  var(--spacing-neg-md); }

/* padding | md 0.843rem */
.p-md   { padding:        var(--spacing-md); }
.pt-md  { padding-top:    var(--spacing-md); }
.pr-md  { padding-right:  var(--spacing-md); }
.pb-md  { padding-bottom: var(--spacing-md); }
.pl-md  { padding-left:   var(--spacing-md); }
.py-md  { padding-top:    var(--spacing-md); padding-bottom: var(--spacing-md); }
.px-md  { padding-left:   var(--spacing-md); padding-right:  var(--spacing-md); }

.gap-md { gap: var(--spacing-md); }

/* margin | lg 1.265rem */
.m-lg  { margin:        var(--spacing-lg); }
.mt-lg { margin-top:    var(--spacing-lg); }
.mr-lg { margin-right:  var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.ml-lg { margin-left:   var(--spacing-lg); }
.my-lg { margin-top:    var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.mx-lg { margin-left:   var(--spacing-lg); margin-right:  var(--spacing-lg); }

/* margin | negative -1.265rem */
.m-neg-lg  { margin:        var(--spacing-neg-lg); }
.mt-neg-lg { margin-top:    var(--spacing-neg-lg); }
.mr-neg-lg { margin-right:  var(--spacing-neg-lg); }
.mb-neg-lg { margin-bottom: var(--spacing-neg-lg); }
.ml-neg-lg { margin-left:   var(--spacing-neg-lg); }
.my-neg-lg { margin-top:    var(--spacing-neg-lg); margin-bottom: var(--spacing-neg-lg); }
.mx-neg-lg { margin-left:   var(--spacing-neg-lg); margin-right:  var(--spacing-neg-lg); }

/* padding | lg 1.265rem */
.p-lg   { padding:        var(--spacing-lg); }
.pt-lg  { padding-top:    var(--spacing-lg); }
.pr-lg  { padding-right:  var(--spacing-lg); }
.pb-lg  { padding-bottom: var(--spacing-lg); }
.pl-lg  { padding-left:   var(--spacing-lg); }
.py-lg  { padding-top:    var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.px-lg  { padding-left:   var(--spacing-lg); padding-right:  var(--spacing-lg); }

.gap-lg { gap: var(--spacing-lg); }

/* margin | xl 1.898rem */
.m-xl  { margin:        var(--spacing-xl); }
.mt-xl { margin-top:    var(--spacing-xl); }
.mr-xl { margin-right:  var(--spacing-xl); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.ml-xl { margin-left:   var(--spacing-xl); }
.my-xl { margin-top:    var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.mx-xl { margin-left:   var(--spacing-xl); margin-right:  var(--spacing-xl); }

/* margin | negative -1.898rem */
.m-neg-xl  { margin:        var(--spacing-neg-xl); }
.mt-neg-xl { margin-top:    var(--spacing-neg-xl); }
.mr-neg-xl { margin-right:  var(--spacing-neg-xl); }
.mb-neg-xl { margin-bottom: var(--spacing-neg-xl); }
.ml-neg-xl { margin-left:   var(--spacing-neg-xl); }
.my-neg-xl { margin-top:    var(--spacing-neg-xl); margin-bottom: var(--spacing-neg-xl); }
.mx-neg-xl { margin-left:   var(--spacing-neg-xl); margin-right:  var(--spacing-neg-xl); }

/* padding | xl 1.898rem */
.p-xl   { padding:        var(--spacing-xl); }
.pt-xl  { padding-top:    var(--spacing-xl); }
.pr-xl  { padding-right:  var(--spacing-xl); }
.pb-xl  { padding-bottom: var(--spacing-xl); }
.pl-xl  { padding-left:   var(--spacing-xl); }
.py-xl  { padding-top:    var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.px-xl  { padding-left:   var(--spacing-xl); padding-right:  var(--spacing-xl); }

.gap-xl { gap: var(--spacing-xl); }

/* padding + gap | extended scale xxl 2.848rem, xxxl 4.272rem */

.py-2xl   { padding-top: var(--spacing-xxl); padding-bottom: var(--spacing-xxl);   }
.py-3xl   { padding-top: var(--spacing-xxxl); padding-bottom: var(--spacing-xxxl); }

.gap-2xl  { gap: var(--spacing-xxl);  }
.gap-3xl  { gap: var(--spacing-xxxl); }

/* Utility | Typography Classes | font size, font weight, text align, text transform, text decoration */

/* font-sizes */
.fs-xs   { font-size: var(--font-size-xs);   }
.fs-sm   { font-size: var(--font-size-sm);   }
.fs-base { font-size: var(--font-size-base); }
.fs-md   { font-size: var(--font-size-md);   }
.fs-lg   { font-size: var(--font-size-lg);   }
.fs-xl   { font-size: var(--font-size-xl);   }
.fs-xxl  { font-size: var(--font-size-xxl);  }
.fs-xxxl { font-size: var(--font-size-xxxl); }

/* font weight */
.fw-bold    { font-weight: bold;    }
.fw-bolder  { font-weight: bolder;  }
.fw-lighter { font-weight: lighter; }

/* text alignment */
.text-center  { text-align: center; }
.text-left    { text-align: left;   }
.text-right   { text-align: right;  }
.text-justify { text-align: justify;}
.text-start   { text-align: start;  }
.text-end     { text-align: end;    }

/* text transform */
.text-lowercase  { text-transform: lowercase;  }
.text-uppercase  { text-transform: uppercase;  }
.text-capitalize { text-transform: capitalize; }

/* text decoration */
.text-underline    { text-decoration: underline;    }
.text-no-underline { text-decoration: none;         } 
.text-italic       { font-style: italic;            }
.text-strike       { text-decoration: line-through; }

/* Utility | Position + width, height + overflow classes */

/* width + height full */
.w-full { width: 100%;  }
.h-full { height: 100%; }

/* position */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }

/* overflow */
.overflow-hide { overflow: hidden; }
.overflow-auto { overflow: auto;   }

/* Utility | Display Classes */

/* display */
.d-block        { display: block;        }
.d-inline       { display: inline;       }
.d-inline-block { display: inline-block; }

/* hard override — use sparingly */
.d-none         { display: none !important; }  
.d-flex         { display: flex;        }
.d-inline-flex  { display: inline-flex; }
.d-grid         { display: grid;        }
.d-inline-grid  { display: inline-grid; }

/* flexbox | direction, wrap, align, sizing, gap */

/* direction */
.flex-row         { flex-direction: row;            }
.flex-row-reverse { flex-direction: row-reverse;    }
.flex-col         { flex-direction: column;         }
.flex-col-reverse { flex-direction: column-reverse; }

/* wrapping */
.flex-wrap   { flex-wrap: wrap;   }
.flex-nowrap { flex-wrap: nowrap; }

/* alignment | justify content, align items */

/* justify-content */
.justify-content-center  { justify-content: center;        }
.justify-content-between { justify-content: space-between; }
.justify-content-around  { justify-content: space-around;  }
.justify-content-evenly  { justify-content: space-evenly;  }
.flex-start              { justify-content: flex-start;    }
.flex-end                { justify-content: flex-end;      }

/* align-items */
.align-items-center   { align-items: center;     }
.align-items-start    { align-items: flex-start; }
.align-items-end      { align-items: flex-end;   }
.align-items-baseline { align-items: baseline;   }
.align-items-stretch  { align-items: stretch;    }

/* sizing */
.flex-grow-1  { flex-grow: 1;   }
.flex-shrink-0{ flex-shrink: 0; }
.flex-fill    { flex: 1 1 auto; }

/* full-width default for mobile stacking */
.flex-item    { flex: 0 0 100%; }

/* flexbox 12-column system based on a 12 unit scale */

.flex-1-12  { flex: 0 0 calc(var(--one-twelfth) * 1);  max-width: calc(var(--one-twelfth) * 1);  }
.flex-2-12  { flex: 0 0 calc(var(--one-twelfth) * 2);  max-width: calc(var(--one-twelfth) * 2);  }
.flex-3-12  { flex: 0 0 calc(var(--one-twelfth) * 3);  max-width: calc(var(--one-twelfth) * 3);  }
.flex-4-12  { flex: 0 0 calc(var(--one-twelfth) * 4);  max-width: calc(var(--one-twelfth) * 4);  }
.flex-5-12  { flex: 0 0 calc(var(--one-twelfth) * 5);  max-width: calc(var(--one-twelfth) * 5);  }
.flex-6-12  { flex: 0 0 calc(var(--one-twelfth) * 6);  max-width: calc(var(--one-twelfth) * 6);  }
.flex-7-12  { flex: 0 0 calc(var(--one-twelfth) * 7);  max-width: calc(var(--one-twelfth) * 7);  }
.flex-8-12  { flex: 0 0 calc(var(--one-twelfth) * 8);  max-width: calc(var(--one-twelfth) * 8);  }
.flex-9-12  { flex: 0 0 calc(var(--one-twelfth) * 9);  max-width: calc(var(--one-twelfth) * 9);  }
.flex-10-12 { flex: 0 0 calc(var(--one-twelfth) * 10); max-width: calc(var(--one-twelfth) * 10); }
.flex-11-12 { flex: 0 0 calc(var(--one-twelfth) * 11); max-width: calc(var(--one-twelfth) * 11); }
.flex-12-12 { flex: 0 0 calc(var(--one-twelfth) * 12); max-width: calc(var(--one-twelfth) * 12); }

/* Responsive Breakpoints | medium (md\:) */

@media (min-width: 768px) {
  
  /* alignment */
  .md\:justify-content-center  { justify-content: center;   }
  .md\:justify-content-between { justify-content: space-between; }
  .md\:justify-content-end     { justify-content: flex-end; }
  .md\:align-items-center      { align-items: center;     }
  .md\:align-items-start       { align-items: flex-start; }
  .md\:align-items-end         { align-items: flex-end;   }

  /* direction */
  .md\:flex-row    { flex-direction: row;    }
  .md\:flex-col    { flex-direction: column; }
  .md\:flex-wrap   { flex-wrap: wrap;   }
  .md\:flex-nowrap { flex-wrap: nowrap; }

  /* 12-col grid */
  .md\:flex-1-12  { flex: 0 0 calc(var(--one-twelfth) * 1);  max-width: calc(var(--one-twelfth) * 1);  }
  .md\:flex-2-12  { flex: 0 0 calc(var(--one-twelfth) * 2);  max-width: calc(var(--one-twelfth) * 2);  }
  .md\:flex-3-12  { flex: 0 0 calc(var(--one-twelfth) * 3);  max-width: calc(var(--one-twelfth) * 3);  }
  .md\:flex-4-12  { flex: 0 0 calc(var(--one-twelfth) * 4);  max-width: calc(var(--one-twelfth) * 4);  }
  .md\:flex-5-12  { flex: 0 0 calc(var(--one-twelfth) * 5);  max-width: calc(var(--one-twelfth) * 5);  }
  .md\:flex-6-12  { flex: 0 0 calc(var(--one-twelfth) * 6);  max-width: calc(var(--one-twelfth) * 6);  }
  .md\:flex-7-12  { flex: 0 0 calc(var(--one-twelfth) * 7);  max-width: calc(var(--one-twelfth) * 7);  }
  .md\:flex-8-12  { flex: 0 0 calc(var(--one-twelfth) * 8);  max-width: calc(var(--one-twelfth) * 8);  }
  .md\:flex-9-12  { flex: 0 0 calc(var(--one-twelfth) * 9);  max-width: calc(var(--one-twelfth) * 9);  }
  .md\:flex-10-12 { flex: 0 0 calc(var(--one-twelfth) * 10); max-width: calc(var(--one-twelfth) * 10); }
  .md\:flex-11-12 { flex: 0 0 calc(var(--one-twelfth) * 11); max-width: calc(var(--one-twelfth) * 11); }
  .md\:flex-12-12 { flex: 0 0 calc(var(--one-twelfth) * 12); max-width: calc(var(--one-twelfth) * 12); }

  /* display overrides */
  .md\:d-none  { display: none !important; }
  .md\:d-block { display: block; }
  .md\:d-flex  { display: flex;  }
}