Update button styles in index.html

Refactor button styles to use CSS variables and simplify properties.

Author: petter-a

index.html

@@ -278,93 +278,28 @@
             max-width: none;
           }
           .btn {
+            height: calc(var(--base, 8px) * 6.5);
+            min-width: calc(var(--base, 8px) * 9);
+            padding: 0 calc(var(--base, 8px) * 4);
+            font-size: .95rem;
+            border-radius: var(--c-button-border-radius, var(--radius-md, var(--base, 8px)/2));
+            background-color: var(--c-button-primary-color, var(--color-primary, #ae0b05));
+            color: var(--c-button-primary-color-contrasting, var(--color-primary-contrasting, var(--color-white, #ffffff)));
+            display: inline-flex;
+            vertical-align: middle;
             align-items: center;
-            appearance: none;
-            background-color: rgb(118, 35, 47);
-            border-bottom-color: rgb(255, 255, 255);
-            border-bottom-left-radius: 3px;
-            border-bottom-right-radius: 3px;
-            border-bottom-style: none;
-            border-bottom-width: 0px;
-            border-image-outset: 0;
-            border-image-repeat: stretch;
-            border-image-slice: 100%;
-            border-image-source: none;
-            border-image-width: 1;
-            border-left-color: rgb(255, 255, 255);
-            border-left-style: none;
-            border-left-width: 0px;
-            border-right-color: rgb(255, 255, 255);
-            border-right-style: none;
-            border-right-width: 0px;
-            border-top-color: rgb(255, 255, 255);
-            border-top-left-radius: 3px;
-            border-top-right-radius: 3px;
-            border-top-style: none;
-            border-top-width: 0px;
-            box-sizing: border-box;
-            color: rgb(255, 255, 255);
-            cursor: pointer;
-            display: flex;
-            filter: drop-shadow(rgba(117, 35, 48, 0.05) 0px 2px 3px);
-            var(--drop-shadow-1, drop-shadow(0px calc(4px * var(--drop-shadow-amount, .7)) calc(6px * var(--drop-shadow-amount, .7)) var(--drop-shadow-color, rgba(0, 0, 0, .1)))).c-button__filled	
-            font-family: Roboto;
-            font-feature-settings: normal;
-            font-kerning: auto;
-            font-optical-sizing: auto;
-            font-size: 15.2px;
-            font-size-adjust: none;
-            font-style: normal;
-            font-variant-alternates: normal;
-            font-variant-caps: normal;
-            font-variant-east-asian: normal;
-            font-variant-ligatures: normal;
-            font-variant-numeric: normal;
-            font-variant-position: normal;
-            font-variation-settings: normal;
-            font-weight: 500;
-            font-width: 100%;
-            height: 52px;
-            hyphens: auto;
             justify-content: center;
-            letter-spacing: normal;
-            line-height: 17.48px;
-            margin-bottom: 0px;
-            margin-left: 8px;
-            margin-right: 0px;
-            margin-top: 0px;
-            max-width: 100%;
-            min-width: 72px;
-            overflow-wrap: break-word;
-            overflow-x: visible;
-            overflow-y: visible;
-            padding-block-end: 0px;
-            padding-block-start: 0px;
-            padding-bottom: 0px;
-            padding-inline-end: 32px;
-            padding-inline-start: 32px;
-            padding-left: 32px;
-            padding-right: 32px;
-            padding-top: 0px;
-            position: relative;
-            text-align: center;
-            text-decoration-color: rgb(255, 255, 255);
-            text-decoration-line: none;
-            text-decoration-style: solid;
-            text-decoration-thickness: auto;
-            text-indent: 0px;
-            text-shadow: none;
-            text-transform: none;
-            transition-behavior: normal;
-            transition-delay: 0s;
-            transition-duration: 0.2s;
-            transition-property: filter;
-            transition-timing-function: ease-in-out;
-            vertical-align: middle;
-            width: 128.0625px;
-            will-change: filter;
-            word-spacing: 0px;
+            text-decoration: none;
+            cursor: pointer;
+            font-weight: var(--c-button-font-weight, var(--font-weight-button, 500));
+            font-family: var(--c-button-font-family, var(--font-family-button, var(--font-family-base, "Roboto", sans-serif)));
+            text-transform: var(--c-button-text-transform, var(--text-transform-button, none));
+            background-color: transparent;
+            border: none;
             -webkit-user-select: none;
+            user-select: none;
+            position: relative;
+            max-width: 100%;
           }
           .button-wrapper a, .button-wrapper a:link, .button-wrapper a:visited, .button-wrapper a:focus, .button-wrapper a:hover, .button-wrapper a:active {
             color: unset;