/* ==========================================================================
   Design system: shared by the main site (About/Résumé/Projects/Bookshelf/
   Contact). /now and /tofers-table intentionally do NOT load this file —
   they keep their own distinct look (base.css + their own stylesheet).
   ========================================================================== */

* {
    box-sizing: border-box;
}

:root {
    font-size: 100%;

    /* MARK: PRIMITIVES */

    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-yellow-950: oklch(28.6% 0.066 53.813);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-green-950: oklch(26.6% 0.065 152.934);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-pink-100: oklch(94.8% 0.028 342.258);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-pink-300: oklch(82.3% 0.12 346.018);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-pink-600: oklch(59.2% 0.249 0.584);
    --color-pink-700: oklch(52.5% 0.223 3.958);
    --color-pink-800: oklch(45.9% 0.187 3.815);
    --color-pink-900: oklch(40.8% 0.153 2.432);
    --color-pink-950: oklch(28.4% 0.109 3.907);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(13% 0.028 261.692);
    --color-mist-50: oklch(98.7% 0.002 197.1);
    --color-mist-100: oklch(96.3% 0.002 197.1);
    --color-mist-200: oklch(92.5% 0.005 214.3);
    --color-mist-300: oklch(87.2% 0.007 219.6);
    --color-mist-400: oklch(72.3% 0.014 214.4);
    --color-mist-500: oklch(56% 0.021 213.5);
    --color-mist-600: oklch(45% 0.017 213.2);
    --color-mist-700: oklch(37.8% 0.015 216);
    --color-mist-800: oklch(27.5% 0.011 216.9);
    --color-mist-900: oklch(21.8% 0.008 223.9);
    --color-mist-950: oklch(14.8% 0.004 228.8);

    /* Brand oranges  */
    --pr-orange-base:    rgb(255, 69, 0); /* orangered */
    --pr-orange-light:   rgb(255, 215, 200);
    --pr-orange-medium:  rgb(254, 198, 177);
    --pr-orange-dark:    rgb(204, 58, 0);

    /* Blues */
    --pr-blue-base:     rgb(0, 132, 214);
    --pr-blue-dark:     hsl(203, 100%, 35%);
    --pr-blue-light:     rgb(246, 252, 255);
    --pr-blue-subtle:     rgb(201, 237, 255);

    /* Neutrals */
    --pr-white:          rgb(255, 255, 255);
    --pr-black:          black;
    --pr-almost-black:   rgb(33, 40, 48);
    --pr-off-white:      rgb(250, 250, 250);
    --pr-porcelain:      rgb(251, 254, 249);
    --pr-gray-100:       oklch(96.7% 0.003 264.542); /* TW gray-100 */
    --pr-gray-200:       oklch(92.8% 0.006 264.531); /* TW gray-200 */
    --pr-gray-400:       rgb(113, 128, 150); /* Muted text (formerly charcoal muted) */
    --pr-gray-700:       rgb(45, 55, 72);    /* Main text (formerly charcoal) */
    --pr-gray-900:       rgb(31, 31, 31);    /* Headlines */

    /* Status */
    --pr-info:           #0066cc;

    /* MARK: TOKENS */

    /* Core Colors */

    --color-primary-bg:     var(--pr-porcelain);
    --color-primary-text:   var(--color-gray-800);
    --color-secondary-text: var(--color-gray-500);

    --color-primary-border: var(--color-gray-200);
    --color-hero-text-accent: var(--color-gray-900);

    --bg-app:               var(--color-primary-bg);
    --bg-surface:           var(--pr-off-white);
    --bg-muted:             var(--color-gray-100);

    --bg-work-status:       var(--pr-almost-black);

    /* Borders */
    --color-border-default: var(--color-gray-200);
    --border-subtle:        var(--pr-gray-200);
    --border-accent:        var(--pr-blue-base);
    --border-brand:         var(--pr-orange-base);
    --border-black:         var(--pr-black);
    --color-border-tag-default: transparent;

    --text-on-brand:        var(--pr-white);
    --text-link:            var(--pr-blue-dark);

    /* Brand/Action States */
    --action-brand:         var(--pr-orange-dark);
    --action-hover:         var(--pr-orange-light);
    --action-active:        var(--pr-orange-medium);

    --card-hover:           var(--color-slate-50);
    --icon-hover-bg:        var(--pr-blue-subtle);

    /* Status Semantic */
    --color-success-bg:   rgb(0, 122, 85, 0.1);
    --color-success-text:   var(--color-green-700);
    --color-error-bg:       var(--color-red-100);
    --color-error-text:     var(--color-red-700);
    --color-info-bg:      hsla(203, 100%, 42%, 0.1);
    --color-info-text:      var(--pr-info);

    /* MARK: Spacing */
    --space-2xs:        0.125rem;
    --space-xs:         0.25rem;
    --space-xs-sm:     0.375rem;
    --space-sm:         0.5rem;
    --space-smedium:    0.75rem;
    --space-md:         1rem;
    --space-marge:      1.25rem;
    --space-lg:         1.5rem;
    --space-xl:         2rem;
    --space-2xl:        3rem;
    --space-3xl:        4rem;
    --space-4xl:        6rem;

    --radius-sm:        0.25rem;
    --radius-md:        0.5rem;
    --radius-lg:        1rem;
    --radius-full:      9999px;

    --border-w-1:       1px;
    --border-w-2:       2px;
    --border-w-3:       3px;
    --border-w-4:       4px;

    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-md:        0 4px 16px rgba(45, 55, 72, 0.12);
    --shadow-lg:        0 12px 32px rgba(45, 55, 72, 0.15);

    --line-height-base: 1.5;
    --line-height-golden: 1.618;
    --line-height-one: 1;
    --line-height-heading: 1.2;

    /* MARK: FONTS */
    --ff-sans: 'Rubik', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --ff-serif: "Arvo", Georgia, serif;
    --ff-mono: 'Courier Prime', 'Courier New', Courier, monospace;
    --ff-heading: var(--ff-serif);
    --ff-special: 'Special Elite', 'Courier Prime', 'Courier New', Courier, monospace;

    --fs-h1: calc(1rem * pow(1.25, 4)); /* ~2.44rem */
    --fs-h2: calc(1rem * pow(1.25, 3)); /* ~1.95rem */
    --fs-h3: calc(1rem * pow(1.25, 2)); /* ~1.56rem */
    --fs-h4: 1.25rem;
    --fs-h5: 1.125rem;
    --fs-base: 1rem;
    --fs-slightly-smaller: .875rem;
    --fs-sm: 0.8rem;
    --fs-xs: 0.75rem;

    --fw-semibold: 600;

    --card-offset: 4px;

    --tag-product-main: purple;
    --tag-product-bg: oklch(94.6% 0.033 307.174); /* TW purple-100 */

    --tag-technical-main: green;
    --tag-technical-bg: oklch(96.2% 0.044 156.743); /* TW green-100 */

    --tag-design-main: oklch(52.5% 0.223 3.958); /* TW pink-700 */
    --tag-design-bg: oklch(94.8% 0.028 342.258); /* TW pink-100 */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

/* MARK: Ext fonts */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

.material-symbols-outlined--400 {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

a:hover .material-symbols-outlined {
    text-decoration: none;
}

.material-symbols-heading {
    font-variation-settings:
        'wght' 500;
}

a:hover .material-symbols-heading {
    text-decoration: none;
    display: inline-block;
}

.special-elite-regular {
    font-family: 'Special Elite', system-ui;
    font-weight: 400;
    font-style: normal;
}

body {
    color: var(--color-primary-text);
    background-color: var(--bg-app);
    font-family: var(--ff-sans);
    min-height: 100vh;
}

button {
    font-family: inherit;
    text-transform: none;
    border: none;
}

/* MARK: Typography */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--ff-heading);
    color: var(--color-primary-text);
    font-weight: 700;
}

p { margin: 0; }

ul {
    list-style-type: circle;
    padding-left: var(--space-lg);
    line-height: var(--line-height-golden);
    margin-block-end: 0px;
    margin-block-start: 0px;
    font-size: 1rem;
}

li {
    margin: var(--space-sm);
    line-height: var(--line-height-golden);
    max-width: 69ch;
    text-wrap: pretty;
}

a {
    color: var(--text-link);
    text-decoration: none;
    padding: 0px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

a:hover { filter: brightness(1.4) }
a:hover.book-card { filter: brightness(0.95)}
a:hover.btn { filter: brightness(1) }
a:hover.project-card { filter: brightness(.97)}

.text-slightly-smaller { font-size: var(--fs-slightly-smaller); line-height: var(--line-height-base) }
.text-small { font-size: var(--fs-sm); line-height: var(--line-height-base) }
.text-p { font-size: var(--fs-base); line-height: var(--line-height-golden) }
.text-h1 { font-size: var(--fs-h1); line-height: var(--line-height-base); }
.text-h2 { font-size: var(--fs-h2); line-height: var(--line-height-base); }
.text-h3 { font-size: var(--fs-h3); line-height: var(--line-height-base); }
.text-h4 { font-size: var(--fs-h4); line-height: var(--line-height-base); }
.text-h5 { font-size: var(--fs-h5); line-height: var(--line-height-base); }

.text-link {
    color: var(--text-link);
    transition: all 0.2s ease;
    background: none;
    padding-left: 0px;
    padding-right: 0px;
}

.text-link:hover { filter: brightness(1.4); text-decoration: underline; }

.color-on-brand { color: var(--pr-white)}
.black { color: black }
.icon-lg {
    font-size: 4rem;
}

.color-blue { color: var(--color-blue-600) }
.color-purple { color: var(--color-purple-600) }
.color-green { color: var(--color-green-600) }
.color-pink { color: var(--color-pink-600) }
.color-gray { color: var(--color-gray-600) }

.line-height-base { line-height: var(--line-height-base) }

.text-right { text-align: right }

.font-sans   { font-family: var(--ff-sans) }
.font-serif  { font-family: var(--ff-serif) }
.font-mono   { font-family: var(--ff-mono) }
.font-special { font-family: var(--ff-special) }

.bold   { font-weight: 700 }
.weight-600 { font-weight: 600 }
.weight-normal { font-weight: normal }
.upper  { text-transform: uppercase }

.muted { color: var(--color-secondary-text) }
.text-info { color: var(--color-info-text) }

/* MARK: Mouse / Animations */
.cursor-default { cursor: default }
.cursor-pointer { cursor: pointer }
.trans-all-200 { transition: all .2s ease-in }
.reveal:hover { opacity: 0.70}

/* MARK: FLEX */

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-align-center { align-items: center }
.flex-align-self-start { align-self: start; }
.flex-align-self-center { align-self: center; }
.flex-align-self-end { align-self: end; }
.flex-align-start { align-items: flex-start }
.flex-align-stretch { align-items: stretch }
.flex-align-end { align-items: flex-end }
.flex-wrap { flex-wrap: wrap }
.flex-wrap-reverse { flex-wrap: wrap-reverse }

.gap-xs     { gap: var(--space-xs) }
.gap-sm     { gap: var(--space-sm) }
.gap-md     { gap: var(--space-md) }
.gap-lg     { gap: var(--space-lg) }
.gap-xl     { gap: var(--space-xl) }
.gap-2xl    { gap: var(--space-2xl) }
.gap-3xl    { gap: var(--space-3xl) }
.gap-4xl    { gap: var(--space-4xl) }

.row-gap-sm {row-gap: var(--space-sm); }

.space-between { justify-content: space-between }
.space-around { justify-content: space-around }

.justify-start { justify-content: flex-start }
.justify-end { justify-content: flex-end }
.justify-center { justify-content: center }

.inline-flex {
    display: inline-flex;
}

/* MARK: GRID */

.grid { display: grid }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(1fr)) }
.grid-cols-hero { grid-template-columns: max-content auto }

.col-span-1 {  grid-column: 1 }
.col-span-2 { grid-column: 2 }

/* MARK: SPACING / POSITIONING */

.full-width { width: 100% }
.full-height { height: 100% }
.width-80 { width: 80% }
.centered { align-items: center; text-align: center }
.relative { position: relative }
.absolute { position: absolute }

.width-28ch {
    width: 28ch;
}

.overflow-hidden { overflow: hidden }

.aspect-2-3 { aspect-ratio: 2 /3 }
.object-cover { object-fit: cover }

.vertical-align-middle { vertical-align: middle }

/* MARK: Margin */
.pin-right { margin-left: auto }
.pin-left { margin-right: auto }
.pin-bottom { margin-top: auto }

.margin-0 { margin: 0 }
.margin-top-1 { margin-top: 1rem }
.margin-top-xl { margin-top:  var(--space-xl) }
.margin-bottom-sm { margin-bottom: var(--space-sm) }
.margin-bottom-md { margin-bottom: var(--space-md) }
.margin-bottom-xl { margin-bottom: var(--space-xl) }
.margin-right-2xl { margin-right: var(--space-2xl) }

.margin-md { margin: var(--space-md) }

/* MARK: Padding */

.padding-0 { padding: 0 }
.padding-sm { padding: var(--space-sm) }
.padding-md { padding: var(--space-md) }
.padding-lg { padding: var(--space-lg) }
.padding-xl { padding: var(--space-xl) }
.padding-2xl { padding: var(--space-2xl) }

.padding-vert-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm) }
.padding-vert-md { padding-top: var(--space-md); padding-bottom: var(--space-md) }
.padding-vert-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg) }
.padding-vert-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl) }
.padding-vert-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl) }
.padding-vert-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl) }
.padding-vert-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl) }

.padding-horizon-xs { padding-left: var(--space-xs); padding-right: var(--space-xs) }
.padding-horizon-sm { padding-left: var(--space-sm); padding-right: var(--space-sm) }
.padding-horizon-md { padding-left: var(--space-md); padding-right: var(--space-md) }
.padding-horizon-lg { padding-left: var(--space-lg); padding-right: var(--space-lg) }
.padding-horizon-xl { padding-left: var(--space-xl); padding-right: var(--space-xl) }
.padding-horizon-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl) }
.padding-horizon-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl) }

.padding-top-lg { padding-top: var(--space-lg) }
.padding-top-xl { padding-top: var(--space-xl) }
.padding-bottom-2xl { padding-bottom:var(--space-2xl) }
.padding-bottom-lg { padding-bottom:var(--space-lg) }
.padding-bottom-md { padding-bottom:var(--space-md) }

.padding-left-md { padding-left: var(--space-md) }
.padding-left-lg { padding-left: var(--space-lg) }
.padding-left-xl { padding-left: var(--space-xl) }

.padding-right-xl { padding-right: var(--space-xl) }

.fit-content { width: fit-content }

/* MARK: OBJECTS (generic only — nav/footer specifics live in site.css) */

.page-max-width { max-width: 1024px; width: 100%; margin: 0; padding-left: var(--space-md); padding-right: var(--space-md) }

.btn {
    border-width: var(--border-w-1);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.btn:hover {
    background-color: var(--action-hover);
}

.content-title {
    font-family: var(--ff-sans);
    color: var(--color-slate-800);
    margin-bottom: var(--space-lg);
    font-size: var(--fs-h4);
    font-weight: 700;
    text-transform: uppercase;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/* MARK: Skins (generic) */
.theme-nav {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.card { display: flex; flex-direction: column }

.card--surface {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.card--interactive {
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.card--interactive:hover {
    box-shadow: var(--shadow-md);
}

.icon-container:has(.material-symbols-outlined) { border-radius: var(--space-sm) }

.icon--interactive:hover { background-color: var(--pr-gray-100) }

/* MARK: Style additions (generic utilities) */
.shadow-sm { box-shadow: var(--shadow-sm) }
.shadow-md { box-shadow: var(--shadow-md) }
.shadow-lg { box-shadow: var(--shadow-lg) }

.border-default { border-width: var(--border-w-1) }
.border-thick-black { border: var(--border-w-2) solid var(--color-gray-950) }
.border-l-accent { border-left-style: solid; border-left-width: var(--border-w-4); border-color: var(--border-accent) }
.border-l-default { border-left-style: solid; border-left-width: var(--border-w-4); border-color: var(--color-secondary-text) }
.border-black { border-color: var(--border-black)}
.border-top-subtle { border-top: 1px solid var(--border-subtle) }
.border-vert-subtle { border-bottom: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle) }

.text-accent { color: var(--border-accent) }

.circular { border-radius: var(--radius-full) }
.rounded { border-radius: var(--radius-md) }
.rounded-sm { border-radius: var(--radius-sm) }
.rounded-md { border-radius: var(--radius-md) }

.readable { max-width: 69ch }
.readable * { max-width: 69ch }

.w-2xl { width: 42rem }

.max-w-40-ch { max-width: 40ch }
.width-32-ch { width: 32ch }
.max-w-lg { max-width: 32rem }
.max-w-xl { max-width: 36rem }
.max-w-2xl { max-width: 42rem }

.pretty-wrap { text-wrap: pretty }
.balance-wrap { text-wrap: balance }
.text-wrap { text-wrap: wrap }

.border-1 { border-width: 1px }
.border-2 { border-width: 2px }
.border-3 { border-width: 3px }
.border-4 { border-width: 4px }

.radius-1 { border-radius: 1rem }
.radius-2 { border-radius: 2rem }

/* MARK: Banner */

.banner {
    --banner-bg-color: var(--bg-muted);
    --banner-font-color: var(--color-primary-text);
    --banner-border-color: var(--color-border-default);

    background-color: var(--banner-bg-color);
    color: var(--banner-font-color);
    border: 1px solid var(--banner-border-color);
    border-radius: .25rem;
}

.banner--default {
    --banner-bg-color: var(--bg-muted);
    --banner-font-color: var(--color-primary-text);
    --banner-border-color: var(--color-primary-text);
}

.banner--success {
    --banner-bg-color: var(--color-success-bg);
    --banner-font-color: var(--color-success-text);
    --banner-border-color: var(--color-success-text);
}

.banner--error {
    --banner-bg-color: var(--color-error-bg);
    --banner-font-color: var(--color-error-text);
    --banner-border-color: var(--color-error-text);
}

.banner--warning {
    --banner-bg-color: var(--color-amber-50);
    --banner-font-color: var(--color-yellow-950);
    --banner-border-color: var(--color-yellow-300);
}

.banner--info {
    --banner-bg-color: var(--color-info-bg);
    --banner-font-color: var(--color-info-text);
    --banner-border-color: var(--color-info-text);
}

.banner--accent-left { border-left-width: 4px }

/* MARK: Tags */

.tag {
    --tag-border-color: transparent;

    display: inline-flex;
    align-items: center;
    gap: var(--space-xs-sm);
    padding: var(--space-2xs) var(--space-smedium);
    border-radius: 9999px;
    font-size: var(--fs-slightly-smaller);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: var(--line-height-base);
    border: 1px solid var(--tag-border-color);
    box-shadow: var(--shadow-sm);
}

.tag--default {
    color: var(--color-secondary-text);
    background-color: var(--color-gray-200);
}

.tag--success {
    color: var(--color-success-text);
    background-color: var(--color-success-bg);
}

.tag--error {
    color: var(--color-error-text);
    background-color: var(--color-error-bg);
}

.tag--design {
    color: var(--tag-design-main);
    background-color: var(--tag-design-bg);
}

.tag--technical {
    color: var(--tag-technical-main);
    background-color: var(--tag-technical-bg);
}

.tag--product {
    color: var(--tag-product-main);
    background-color: var(--tag-product-bg);
}

.tag--outlined { --tag-border-color: currentColor }

/* MARK: Responsive base font scaling */
@media (max-width: 1024px) {
    :root { font-size: 93.75%; }
}

@media (max-width: 768px) {
    :root { font-size: 87.5%; }
}

@media (max-width: 480px) {
    :root {
        font-size: 81.25%;
        --space-3xl: 1.25rem;
        --space-2xl: 1rem;
    }
    .width-80 { width: 100% }
}