@birdapi/velinstyle 0.8.0 → 0.9.0

package/src/components/highlight.css

@@ -0,0 +1,182 @@
+@layer components {
+  pre.velin-syntax-pending code,
+  code.velin-syntax-pending {
+    opacity: 0;
+  }
+
+  pre.velin-syntax-ready code,
+  code.velin-syntax-ready {
+    opacity: 1;
+    transition: opacity var(--velin-duration-normal, 250ms) var(--velin-ease-out, ease-out);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    pre.velin-syntax-ready code,
+    code.velin-syntax-ready {
+      transition: none;
+    }
+  }
+
+  .velin-token {
+    font-family: inherit;
+  }
+
+  .velin-token--keyword {
+    color: oklch(45% 0.2 265);
+  }
+
+  .velin-token--string {
+    color: oklch(42% 0.14 145);
+  }
+
+  .velin-token--comment {
+    color: oklch(55% 0.02 265);
+    font-style: italic;
+  }
+
+  .velin-token--number {
+    color: oklch(48% 0.16 55);
+  }
+
+  .velin-token--operator {
+    color: oklch(50% 0.18 25);
+  }
+
+  .velin-token--punctuation {
+    color: oklch(52% 0.02 265);
+  }
+
+  .velin-token--identifier {
+    color: oklch(38% 0.04 265);
+  }
+
+  .velin-token--tag {
+    color: oklch(48% 0.18 25);
+  }
+
+  .velin-token--attr-name {
+    color: oklch(45% 0.16 265);
+  }
+
+  .velin-token--attr-value {
+    color: oklch(42% 0.14 145);
+  }
+
+  .velin-token--builtin {
+    color: oklch(46% 0.17 310);
+  }
+
+  .velin-token--regex {
+    color: oklch(50% 0.16 55);
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    .velin-token--keyword {
+      color: color(display-p3 0.2 0.35 0.85);
+    }
+
+    .velin-token--string {
+      color: color(display-p3 0.15 0.55 0.35);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-velin-theme='light']) .velin-token--keyword {
+      color: oklch(78% 0.14 285);
+    }
+  }
+
+  [data-velin-theme='dark'] .velin-token--keyword {
+    color: oklch(78% 0.14 285);
+  }
+
+  [data-velin-theme='dark'] .velin-token--string {
+    color: oklch(78% 0.12 145);
+  }
+
+  [data-velin-theme='dark'] .velin-token--comment {
+    color: oklch(62% 0.03 285);
+  }
+
+  [data-velin-theme='dark'] .velin-token--number {
+    color: oklch(80% 0.12 75);
+  }
+
+  [data-velin-theme='dark'] .velin-token--operator {
+    color: oklch(78% 0.14 25);
+  }
+
+  [data-velin-theme='dark'] .velin-token--tag {
+    color: oklch(78% 0.14 25);
+  }
+
+  [data-velin-theme='dark'] .velin-token--attr-name {
+    color: oklch(76% 0.12 285);
+  }
+
+  [data-velin-theme='dark'] .velin-token--identifier {
+    color: oklch(88% 0.02 285);
+  }
+
+  .velin-code-block__line--highlight {
+    background: color-mix(in oklch, var(--velin-color-primary, oklch(55% 0.2 265)) 18%, transparent);
+    display: block;
+    margin-inline: calc(-1 * var(--velin-space-4, 1rem));
+    padding-inline: var(--velin-space-4, 1rem);
+  }
+
+  velin-code-block {
+    display: block;
+    position: relative;
+  }
+
+  velin-code-block[data-collapsed] pre {
+    max-height: 12rem;
+    overflow: hidden;
+  }
+
+  velin-code-block .velin-code-block__gutter {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0;
+  }
+
+  velin-code-block .velin-code-block__line-numbers {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: flex-end;
+    padding: var(--velin-space-4);
+    padding-inline-end: var(--velin-space-2);
+    text-align: end;
+    user-select: none;
+    color: var(--velin-color-text-muted);
+    font-family: var(--velin-font-mono, ui-monospace, monospace);
+    font-size: var(--velin-text-sm, 0.875rem);
+    line-height: 1.55;
+    border-inline-end: 1px solid var(--velin-color-border);
+  }
+
+  velin-code-block .velin-code-block__line-numbers > span {
+    display: block;
+    min-height: 1.55em;
+    line-height: 1.55;
+  }
+
+  velin-code-block .velin-code-block__gutter pre,
+  velin-code-block .velin-code-block__gutter pre code {
+    margin: 0;
+    white-space: pre;
+    line-height: 1.55;
+    tab-size: 2;
+  }
+
+  velin-code-block .velin-code-block__toolbar {
+    position: absolute;
+    inset-block-start: var(--velin-space-2);
+    inset-inline-end: var(--velin-space-2);
+    display: flex;
+    gap: var(--velin-space-2);
+    z-index: 1;
+  }
+}

package/src/components/input-group.css

@@ -81,8 +81,7 @@
   .velin-float-label > .velin-input,
   .velin-float-label > .velin-select,
   .velin-float-label > .velin-textarea {
-    padding-block-start: var(--velin-space-5);
-    padding-block-end: var(--velin-space-1);
+    padding-block: var(--velin-space-5) var(--velin-space-1);
   }
 
   .velin-float-label > .velin-label {

package/src/components/nav.css

@@ -70,7 +70,7 @@
 
   /* Mobile: stack nav vertically */
   /* Aligns with --velin-bp-md (48rem) used in safe-area utilities */
-  @media (max-width: 47.999rem) {
+  @media (width <= 47.999rem) {
     .velin-nav {
       flex-wrap: wrap;
     }
@@ -116,8 +116,7 @@
   /* Mega menu */
   .velin-nav__mega {
     position: absolute;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+    inset-inline: 0;
     inset-block-start: 100%;
     z-index: var(--velin-z-dropdown);
     background: var(--velin-color-surface-bright);

package/src/components/search.css

@@ -0,0 +1,95 @@
+@layer components {
+  .velin-search {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .velin-search__input {
+    inline-size: 100%;
+    padding: var(--velin-space-2) var(--velin-space-3);
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+    background: var(--velin-color-surface);
+    color: var(--velin-color-text);
+  }
+
+  .velin-search__results {
+    position: absolute;
+    inset-block-start: calc(100% + var(--velin-space-1));
+    inset-inline: 0;
+    z-index: var(--velin-z-dropdown, 100);
+    max-block-size: 20rem;
+    overflow: auto;
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+    background: var(--velin-color-surface);
+    box-shadow: var(--velin-shadow-lg);
+    opacity: 0;
+    transform: translateY(-0.25rem);
+    transition:
+      opacity var(--velin-duration-fast, 150ms) ease,
+      transform var(--velin-duration-fast, 150ms) ease;
+  }
+
+  .velin-search__results--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .velin-search__group-label {
+    padding: var(--velin-space-2) var(--velin-space-3);
+    font-size: var(--velin-text-xs, 0.75rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--velin-color-text-muted);
+    border-block-end: 1px solid var(--velin-color-border);
+  }
+
+  .velin-search__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--velin-space-1);
+    padding: var(--velin-space-2) var(--velin-space-3);
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .velin-search__item:hover,
+  .velin-search__item--active {
+    background: var(--velin-color-surface-hover, color-mix(in oklch, var(--velin-color-primary) 12%, transparent));
+  }
+
+  .velin-search__title {
+    font-weight: 600;
+  }
+
+  .velin-search__excerpt {
+    font-size: var(--velin-text-sm, 0.875rem);
+    color: var(--velin-color-text-muted);
+  }
+
+  .velin-search-hit {
+    background: color-mix(in oklch, var(--velin-color-primary) 35%, transparent);
+    border-radius: 2px;
+    padding-inline: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .velin-search__results {
+      transition: none;
+    }
+  }
+
+  @media (width <= 640px) {
+    .velin-search {
+      min-inline-size: 0;
+    }
+
+    .velin-search__results {
+      inset-inline: 0;
+      max-inline-size: min(100vw, 100%);
+      box-sizing: border-box;
+    }
+  }
+}

package/src/components/stepper.css

@@ -107,10 +107,8 @@
   }
 
   .velin-stepper--vertical .velin-stepper__step + .velin-stepper__step::before {
-    inset-inline-start: 1.125rem;
-    inset-inline-end: auto;
-    inset-block-start: auto;
-    inset-block-end: calc(100% - 0.5rem);
+    inset-inline: 1.125rem auto;
+    inset-block: auto calc(100% - 0.5rem);
     inline-size: 2px;
     block-size: calc(100% - 2.5rem);
   }

package/src/components/timeline.css

@@ -8,8 +8,7 @@
     content: "";
     position: absolute;
     inset-inline-start: 0.5rem;
-    inset-block-start: var(--velin-space-2);
-    inset-block-end: var(--velin-space-2);
+    inset-block: var(--velin-space-2) var(--velin-space-2);
     inline-size: 2px;
     background: var(--velin-color-border);
   }

package/src/components/tooltip.css

@@ -39,13 +39,11 @@
 
   /* Placement modifiers */
   .velin-tooltip--bottom .velin-tooltip__content {
-    inset-block-end: auto;
-    inset-block-start: calc(100% + var(--velin-space-2));
+    inset-block: calc(100% + var(--velin-space-2)) auto;
   }
 
   .velin-tooltip--bottom .velin-tooltip__content::after {
-    inset-block-start: auto;
-    inset-block-end: 100%;
+    inset-block: auto 100%;
     border-block-start-color: transparent;
     border-block-end-color: var(--velin-color-text);
   }

package/src/layout/container.css

@@ -7,32 +7,32 @@
     container-name: velin;
   }
 
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     .velin-container {
       max-inline-size: 33rem;
       padding-inline: var(--velin-space-6);
     }
   }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-container {
       max-inline-size: 45rem;
     }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-container {
       max-inline-size: 60rem;
     }
   }
 
-  @media (min-width: 80rem) {
+  @media (width >= 80rem) {
     .velin-container {
       max-inline-size: 76rem;
     }
   }
 
-  @media (min-width: 96rem) {
+  @media (width >= 96rem) {
     .velin-container {
       max-inline-size: 90rem;
     }

package/src/layout/grid.css

@@ -107,7 +107,7 @@
   .velin-row > .velin-col-12 { flex: 0 0 auto; inline-size: 100%; }
 
   /* Responsive columns */
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     .velin-sm-col { flex: 1 0 0%; }
     .velin-sm-col-auto { flex: 0 0 auto; inline-size: auto; }
     .velin-row > .velin-sm-col-1 { flex: 0 0 auto; inline-size: 8.333%; }
@@ -119,7 +119,7 @@
     .velin-row > .velin-sm-col-12 { flex: 0 0 auto; inline-size: 100%; }
   }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-md-col { flex: 1 0 0%; }
     .velin-md-col-auto { flex: 0 0 auto; inline-size: auto; }
     .velin-row > .velin-md-col-1 { flex: 0 0 auto; inline-size: 8.333%; }
@@ -133,7 +133,7 @@
     .velin-row > .velin-md-col-12 { flex: 0 0 auto; inline-size: 100%; }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-lg-col { flex: 1 0 0%; }
     .velin-lg-col-auto { flex: 0 0 auto; inline-size: auto; }
     .velin-row > .velin-lg-col-1 { flex: 0 0 auto; inline-size: 8.333%; }
@@ -149,7 +149,7 @@
     .velin-row > .velin-lg-col-12 { flex: 0 0 auto; inline-size: 100%; }
   }
 
-  @media (min-width: 80rem) {
+  @media (width >= 80rem) {
     .velin-xl-col { flex: 1 0 0%; }
     .velin-row > .velin-xl-col-2 { flex: 0 0 auto; inline-size: 16.666%; }
     .velin-row > .velin-xl-col-3 { flex: 0 0 auto; inline-size: 25%; }
@@ -166,7 +166,7 @@
   .velin-offset-5 { margin-inline-start: 41.666%; }
   .velin-offset-6 { margin-inline-start: 50%; }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-md-offset-0 { margin-inline-start: 0; }
     .velin-md-offset-1 { margin-inline-start: 8.333%; }
     .velin-md-offset-2 { margin-inline-start: 16.666%; }
@@ -174,7 +174,7 @@
     .velin-md-offset-4 { margin-inline-start: 33.333%; }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-lg-offset-0 { margin-inline-start: 0; }
     .velin-lg-offset-1 { margin-inline-start: 8.333%; }
     .velin-lg-offset-2 { margin-inline-start: 16.666%; }
@@ -209,13 +209,13 @@
   .velin-row-cols-5 > * { flex: 0 0 auto; inline-size: 20%; }
   .velin-row-cols-6 > * { flex: 0 0 auto; inline-size: 16.666%; }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-md-row-cols-2 > * { flex: 0 0 auto; inline-size: 50%; }
     .velin-md-row-cols-3 > * { flex: 0 0 auto; inline-size: 33.333%; }
     .velin-md-row-cols-4 > * { flex: 0 0 auto; inline-size: 25%; }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-lg-row-cols-3 > * { flex: 0 0 auto; inline-size: 33.333%; }
     .velin-lg-row-cols-4 > * { flex: 0 0 auto; inline-size: 25%; }
     .velin-lg-row-cols-6 > * { flex: 0 0 auto; inline-size: 16.666%; }

package/src/layout/patterns.css

@@ -6,7 +6,7 @@
     min-block-size: 100vh;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-sidebar {
       grid-template-columns: 1fr;
     }
@@ -25,7 +25,7 @@
     grid-column: 1 / -1;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-holy-grail {
       grid-template-columns: 1fr;
     }
@@ -64,7 +64,7 @@
     gap: var(--velin-space-8);
   }
 
-  @media (max-width: 56rem) {
+  @media (width <= 56rem) {
     .velin-layout-aside-main {
       grid-template-columns: 1fr;
     }
@@ -78,7 +78,7 @@
     min-block-size: auto;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-split {
       grid-template-columns: 1fr;
     }
@@ -108,7 +108,7 @@
     grid-row: 2;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-dashboard {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto 1fr;

package/src/themes/brutalist.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 0;
     --velin-radius-full: 0;
     --velin-radius-pill: 0;
-
-    --velin-color-primary: oklch(65% 0.25 30);
+    --velin-color-primary: oklch(38% 0.22 30);
     --velin-color-primary-hover: oklch(58% 0.25 30);
     --velin-color-primary-active: oklch(50% 0.25 30);
     --velin-color-primary-subtle: oklch(92% 0.05 30);
-    --velin-color-on-primary: oklch(0% 0 0);
-
+    --velin-color-on-primary: oklch(100% 0 0);
     --velin-color-secondary: oklch(85% 0.2 90);
     --velin-color-secondary-hover: oklch(78% 0.2 90);
     --velin-color-secondary-subtle: oklch(95% 0.05 90);
     --velin-color-on-secondary: oklch(0% 0 0);
-
     --velin-color-surface: oklch(97% 0.005 90);
     --velin-color-surface-dim: oklch(92% 0.01 90);
     --velin-color-surface-bright: oklch(100% 0 0);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(30% 0 0);
     --velin-color-border: oklch(10% 0 0);
     --velin-color-border-strong: oklch(0% 0 0);
-
     --velin-shadow-sm: 3px 3px 0 oklch(0% 0 0);
     --velin-shadow-md: 4px 4px 0 oklch(0% 0 0);
     --velin-shadow-lg: 6px 6px 0 oklch(0% 0 0);
     --velin-shadow-xl: 8px 8px 0 oklch(0% 0 0);
     --velin-shadow-2xl: 12px 12px 0 oklch(0% 0 0);
-
     --velin-font-heading: "Space Mono", "Courier New", monospace;
     --velin-font-body: "Space Grotesk", "IBM Plex Sans", var(--velin-font-sans);
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 700;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 700;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.05em;
     --velin-tracking-wider: 0.1em;
-
     --velin-leading-tight: 1.15;
     --velin-leading-normal: 1.4;
-
     --velin-duration-normal: 100ms;
     --velin-duration-slow: 150ms;
   }

package/src/themes/corporate.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 0.5rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(35% 0.1 260);
     --velin-color-primary-hover: oklch(28% 0.1 260);
     --velin-color-primary-active: oklch(22% 0.1 260);
     --velin-color-primary-subtle: oklch(94% 0.02 260);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(70% 0.15 85);
     --velin-color-secondary-hover: oklch(63% 0.15 85);
     --velin-color-secondary-subtle: oklch(95% 0.03 85);
     --velin-color-on-secondary: oklch(10% 0 0);
-
     --velin-color-surface: oklch(97% 0.005 250);
     --velin-color-surface-dim: oklch(94% 0.005 250);
     --velin-color-surface-bright: oklch(100% 0 0);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(42% 0.01 260);
     --velin-color-border: oklch(85% 0.005 250);
     --velin-color-border-strong: oklch(65% 0.01 250);
-
     --velin-shadow-sm: 0 1px 2px oklch(20% 0.01 260 / 0.06);
     --velin-shadow-md: 0 2px 6px oklch(20% 0.01 260 / 0.08);
     --velin-shadow-lg: 0 4px 12px oklch(20% 0.01 260 / 0.1);
     --velin-shadow-xl: 0 8px 20px oklch(20% 0.01 260 / 0.12);
     --velin-shadow-2xl: 0 12px 32px oklch(20% 0.01 260 / 0.14);
-
     --velin-font-heading: "IBM Plex Sans", system-ui, sans-serif;
     --velin-font-body: "IBM Plex Sans", system-ui, sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.03em;
     --velin-tracking-wider: 0.06em;
-
     --velin-leading-tight: 1.2;
     --velin-leading-normal: 1.55;
-
     --velin-duration-normal: 150ms;
     --velin-duration-slow: 250ms;
   }

package/src/themes/earth.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 1rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(55% 0.12 30);
     --velin-color-primary-hover: oklch(48% 0.12 30);
     --velin-color-primary-active: oklch(42% 0.12 30);
     --velin-color-primary-subtle: oklch(92% 0.03 30);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(55% 0.1 120);
     --velin-color-secondary-hover: oklch(48% 0.1 120);
     --velin-color-secondary-subtle: oklch(93% 0.03 120);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(95% 0.02 80);
     --velin-color-surface-dim: oklch(90% 0.025 80);
     --velin-color-surface-bright: oklch(99% 0.005 80);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(45% 0.03 30);
     --velin-color-border: oklch(78% 0.04 60);
     --velin-color-border-strong: oklch(55% 0.06 40);
-
     --velin-shadow-sm: 0 1px 3px oklch(30% 0.03 30 / 0.12);
     --velin-shadow-md: 0 3px 8px oklch(30% 0.03 30 / 0.15);
     --velin-shadow-lg: 0 6px 16px oklch(30% 0.03 30 / 0.18);
     --velin-shadow-xl: 0 10px 24px oklch(30% 0.03 30 / 0.2);
     --velin-shadow-2xl: 0 16px 40px oklch(30% 0.03 30 / 0.25);
-
     --velin-font-heading: "Merriweather", Georgia, serif;
     --velin-font-body: "Source Sans 3", "Source Sans Pro", sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.025em;
     --velin-tracking-wider: 0.05em;
-
     --velin-leading-tight: 1.25;
     --velin-leading-normal: 1.6;
-
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 350ms;
   }

package/src/themes/forest.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 1rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(45% 0.12 150);
     --velin-color-primary-hover: oklch(38% 0.12 150);
     --velin-color-primary-active: oklch(32% 0.12 150);
     --velin-color-primary-subtle: oklch(93% 0.03 150);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(55% 0.08 130);
     --velin-color-secondary-hover: oklch(48% 0.08 130);
     --velin-color-secondary-subtle: oklch(93% 0.02 130);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(96% 0.01 140);
     --velin-color-surface-dim: oklch(92% 0.015 140);
     --velin-color-surface-bright: oklch(99% 0.005 140);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(40% 0.03 140);
     --velin-color-border: oklch(80% 0.03 140);
     --velin-color-border-strong: oklch(55% 0.06 145);
-
     --velin-shadow-sm: 0 1px 3px oklch(25% 0.03 140 / 0.1);
     --velin-shadow-md: 0 3px 8px oklch(25% 0.03 140 / 0.14);
     --velin-shadow-lg: 0 6px 16px oklch(25% 0.03 140 / 0.16);
     --velin-shadow-xl: 0 10px 24px oklch(25% 0.03 140 / 0.18);
     --velin-shadow-2xl: 0 16px 40px oklch(25% 0.03 140 / 0.22);
-
     --velin-font-heading: "Merriweather", Georgia, serif;
     --velin-font-body: "Lato", sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.025em;
     --velin-tracking-wider: 0.05em;
-
     --velin-leading-tight: 1.25;
     --velin-leading-normal: 1.6;
-
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 350ms;
   }