@sproutsocial/seeds-theme 0.1.0

package/dist/legacy-light.css

@@ -0,0 +1,437 @@
+@import "./theme-light.css";
+
+:root {
+  --color-app-bg-base: #f3f4f4;
+  --color-container-bg-base: #FFFFFF;
+  --color-container-bg-success: #d7f4d7;
+  --color-container-bg-warning: #fdefcd;
+  --color-container-bg-error: #ffd5d2;
+  --color-container-bg-info: #deebfe;
+  --color-container-bg-opportunity: #eaeaf9;
+  --color-container-bg-danger: #ffd5d2;
+  --color-container-bg-decorative-green: #d7f4d7;
+  --color-container-bg-decorative-blue: #deebfe;
+  --color-container-bg-decorative-purple: #eaeaf9;
+  --color-container-bg-decorative-yellow: #fdefcd;
+  --color-container-bg-decorative-orange: #fcdccc;
+  --color-container-bg-decorative-red: #ffd5d2;
+  --color-container-bg-decorative-neutral: #f3f4f4;
+  --color-container-bg-decorative-magenta: #f9e3fc;
+  --color-container-bg-decorative-pink: #fcdbeb;
+  --color-container-bg-decorative-aqua: #c5f9f9;
+  --color-container-bg-decorative-teal: #cdf7ef;
+  --color-container-bg-selected: #364141;
+  --color-container-bg-positive_sentiment: #3876e3;
+  --color-container-bg-negative_sentiment: #f76054;
+  --color-container-bg-neutral_sentiment: #c8cccc;
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
+  --color-container-bg-ai-generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base); /** Composed background for AI-generated containers, layered over the mode-specific base surface. */
+  --color-container-border-base: #dee1e1;
+  --color-container-border-success: #59cb59;
+  --color-container-border-warning: #ffbc00;
+  --color-container-border-error: #ed4c42;
+  --color-container-border-danger: #ed4c42;
+  --color-container-border-info: #2b68d3;
+  --color-container-border-opportunity: #9180f4;
+  --color-container-border-decorative-green: #59cb59;
+  --color-container-border-decorative-blue: #2b68d3;
+  --color-container-border-decorative-purple: #9180f4;
+  --color-container-border-decorative-yellow: #ffbc00;
+  --color-container-border-decorative-orange: #f57d33;
+  --color-container-border-decorative-red: #ed4c42;
+  --color-container-border-decorative-neutral: #6e797a;
+  --color-container-border-decorative-magenta: #c44eb9;
+  --color-container-border-decorative-pink: #e0447c;
+  --color-container-border-decorative-aqua: #17b8ce;
+  --color-container-border-decorative-teal: #08c4b2;
+  --color-container-border-selected: #364141;
+  --color-container-border-ai_generated: #6f5ed3;
+  --color-gradient-ai: radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%);
+  --color-gradient-ai-subtle: radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%);
+  --color-gradient-ai-stop-1: #205bc3;
+  --color-gradient-ai-stop-2: #9747ff;
+  --color-gradient-ai-stop-3: #f282f5;
+  --color-button-primary-bg-base: #205bc3;
+  --color-button-primary-bg-hover: #1150aa;
+  --color-button-primary-bg-active: #0c3f89;
+  --color-button-primary-border-base: transparent;
+  --color-button-primary-text-base: #FFFFFF;
+  --color-button-primary-text-hover: #FFFFFF;
+  --color-button-secondary-bg-base: transparent;
+  --color-button-secondary-bg-hover: #364141;
+  --color-button-secondary-bg-active: #273333;
+  --color-button-secondary-border-base: #364141;
+  --color-button-secondary-text-base: #364141;
+  --color-button-secondary-text-hover: #FFFFFF;
+  --color-button-pill-bg-base: transparent;
+  --color-button-pill-bg-hover: #f3f4f4;
+  --color-button-pill-bg-active: #dee1e1;
+  --color-button-pill-border-base: transparent;
+  --color-button-pill-border-hover: #364141;
+  --color-button-pill-text-base: #364141;
+  --color-button-pill-text-hover: #273333;
+  --color-button-destructive-bg-base: #c63434;
+  --color-button-destructive-bg-hover: #992222;
+  --color-button-destructive-bg-active: #6d1313;
+  --color-button-destructive-border-base: transparent;
+  --color-button-destructive-text-base: #FFFFFF;
+  --color-button-destructive-text-hover: #FFFFFF;
+  --color-button-placeholder-bg-base: transparent;
+  --color-button-placeholder-bg-hover: #FFFFFF;
+  --color-button-placeholder-bg-active: #FFFFFF;
+  --color-button-placeholder-border-base: #929a9b;
+  --color-button-placeholder-text-base: #205bc3;
+  --color-button-placeholder-text-hover: #1150aa;
+  --color-button-overlay-bg-base: color-mix(in srgb, #040404, transparent 40%);
+  --color-button-overlay-bg-hover: color-mix(in srgb, #040404, transparent 25%);
+  --color-button-overlay-text-base: #FFFFFF;
+  --color-button-unstyled-bg-base: transparent;
+  --color-button-unstyled-border-base: transparent;
+  --color-button-unstyled-text-base: #515e5f;
+  --color-button-unstyled-text-hover: #273333;
+  --color-button-ai-primary-bg-base: var(--color-gradient-ai);
+  --color-button-ai-primary-border-base: transparent;
+  --color-button-ai-primary-text-base: #FFFFFF;
+  --color-button-ai-primary-text-hover: #FFFFFF;
+  --color-button-ai-secondary-bg-base: var(--color-gradient-ai-subtle);
+  --color-button-ai-secondary-border-base: transparent;
+  --color-button-ai-secondary-text-base: #364141;
+  --color-button-ai-secondary-text-hover: #364141;
+  --color-button-ai-outline-bg-base: transparent;
+  --color-button-ai-outline-border-base: var(--color-gradient-ai);
+  --color-button-ai-outline-text-base: #364141;
+  --color-button-ai-outline-text-hover: #364141;
+  --color-link-base: #1150aa;
+  --color-link-hover: #0c3f89;
+  --color-text-headline: #273333;
+  --color-text-subtext: #515e5f;
+  --color-text-body: #364141;
+  --color-text-inverse: #FFFFFF;
+  --color-text-error: #992222;
+  --color-text-bg-highlight: #ffe99a;
+  --color-text-bg-selection: #a1c2f8;
+  --color-text-decorative-green: #006b40;
+  --color-text-decorative-blue: #0c3f89;
+  --color-text-decorative-purple: #5e4eba;
+  --color-text-decorative-yellow: #944c0c;
+  --color-text-decorative-orange: #962c0b;
+  --color-text-decorative-red: #992222;
+  --color-text-decorative-neutral: #273333;
+  --color-text-decorative-magenta: #6c2277;
+  --color-text-decorative-pink: #931847;
+  --color-text-decorative-aqua: #035e73;
+  --color-text-decorative-teal: #026661;
+  --color-text-ai_generated: #273333;
+  --color-icon-base: #364141;
+  --color-icon-inverse: #FFFFFF;
+  --color-icon-success: #006b40;
+  --color-icon-warning: #944c0c;
+  --color-icon-error: #992222;
+  --color-icon-danger: #992222;
+  --color-icon-info: #0c3f89;
+  --color-icon-opportunity: #5e4eba;
+  --color-icon-applied: #205bc3;
+  --color-icon-positive_sentiment: #2b68d3;
+  --color-icon-negative_sentiment: #ed4c42;
+  --color-icon-neutral_sentiment: #6e797a;
+  --color-form-bg-base: #FFFFFF;
+  --color-form-bg-selected: #364141;
+  --color-form-border-base: #6e797a;
+  --color-form-border-error: #ed4c42;
+  --color-form-border-warning: #ffbc00;
+  --color-form-border-selected: #364141;
+  --color-form-placeholder-base: #515e5f;
+  --color-listItem-bg-base: transparent;
+  --color-listItem-bg-hover: #f3f4f4;
+  --color-listItem-bg-selected: #364141;
+  --color-listItem-bg-active: #b0b6b7;
+  --color-listItem-border-base: #6e797a;
+  --color-menuItem-bg-active: #b0b6b7;
+  --color-nav-navItem-text-base: #FFFFFF;
+  --color-nav-navItem-icon-base: #FFFFFF;
+  --color-nav-navItem-indicator-notification-base: #e0447c;
+  --color-nav-navItem-indicator-userStatus-online: #59cb59;
+  --color-nav-navItem-indicator-userStatus-offline: #ed4c42;
+  --color-nav-navItem-indicator-userStatus-unavailable: #364141;
+  --color-nav-navItem-bg-base: transparent;
+  --color-nav-navItem-bg-hover: #364141;
+  --color-nav-navItem-bg-active: #040404;
+  --color-nav-navItem-bg-selected: #515e5f;
+  --color-nav-navItem-border-hover: #515e5f;
+  --color-nav-navItem-border-active: #515e5f;
+  --color-nav-navItem-border-selected: #515e5f;
+  --color-overlay-bg-base: color-mix(in srgb, #162020, transparent 44%);
+  --color-overlay-bg-inverse: color-mix(in srgb, #FFFFFF, transparent 30%);
+  --color-overlay-text-base: #FFFFFF;
+  --color-overlay-icon-base: #FFFFFF;
+  --color-elevation-base: #2733333D;
+  --color-illustration-fill: #679eff;
+  --color-illustration-stroke: #273333;
+  --color-network-twitter: #000000;
+  --color-network-twitter_like: #e0245e;
+  --color-network-facebook: #1877F2;
+  --color-network-facebook_audience_network: #58409B;
+  --color-network-linkedin: #0A66C2;
+  --color-network-instagram: #e4405f;
+  --color-network-feedly: #2bb24c;
+  --color-network-analytics: #ef6c00;
+  --color-network-google_analytics_property: #ef6c00;
+  --color-network-youtube: #ff0000;
+  --color-network-messenger: #000000;
+  --color-network-snapchat: #fffc00;
+  --color-network-pinterest: #E60023;
+  --color-network-tumblr: #35465c;
+  --color-network-reddit: #ff4500;
+  --color-network-tripadvisor: #00B087;
+  --color-network-glassdoor: #0CAA41;
+  --color-network-google_ads: #FBBC04;
+  --color-network-google_my_business: #4285F4;
+  --color-network-google_business_messages: #1A73EA;
+  --color-network-google_play_store: #01875F;
+  --color-network-apple_app_store: #17C8F5;
+  --color-network-salesforce: #1589EE;
+  --color-network-zendesk: #03363D;
+  --color-network-hubspot: #FF7A59;
+  --color-network-microsoft_dynamics: #002050;
+  --color-network-yelp: #FF1A1A;
+  --color-network-whatsapp: #59CE72;
+  --color-network-tiktok: #000000;
+  --color-network-threads: #000000;
+  --color-network-trustpilot: #04DA8D;
+  --color-network-x: #000000;
+  --color-network-x_like: #e0245e;
+  --color-network-bluesky: #1185FE;
+  --color-network-bazaarvoice: #002E6E;
+  --color-dataviz-map-1: #08c4b2;
+  --color-dataviz-map-2: #6f5ed3;
+  --color-dataviz-map-3: #ce3665;
+  --color-dataviz-map-4: #ffcd1c;
+  --color-dataviz-map-5: #3876e3;
+  --color-dataviz-map-6: #db61db;
+  --color-dataviz-map-7: #59cb59;
+  --color-dataviz-map-8: #fc8943;
+  --color-dataviz-map-9: #db3e3e;
+  --color-dataviz-map-10: #026661;
+  --color-dataviz-map-11: #a193f2;
+  --color-dataviz-map-12: #931847;
+  --color-dataviz-map-13: #944c0c;
+  --color-dataviz-map-14: #0c3f89;
+  --color-dataviz-map-15: #6c2277;
+  --color-dataviz-map-16: #006b40;
+  --color-dataviz-map-17: #962c0b;
+  --color-dataviz-map-18: #ff7f6e;
+  --color-dataviz-map-19: #0ca750;
+  --color-dataviz-map-20: #ba7506;
+  --color-dataviz-list-0: #08c4b2;
+  --color-dataviz-list-1: #6f5ed3;
+  --color-dataviz-list-2: #ce3665;
+  --color-dataviz-list-3: #ffcd1c;
+  --color-dataviz-list-4: #3876e3;
+  --color-dataviz-list-5: #db61db;
+  --color-dataviz-list-6: #59cb59;
+  --color-dataviz-list-7: #fc8943;
+  --color-dataviz-list-8: #db3e3e;
+  --color-dataviz-list-9: #026661;
+  --color-dataviz-list-10: #a193f2;
+  --color-dataviz-list-11: #931847;
+  --color-dataviz-list-12: #944c0c;
+  --color-dataviz-list-13: #0c3f89;
+  --color-dataviz-list-14: #6c2277;
+  --color-dataviz-list-15: #006b40;
+  --color-dataviz-list-16: #962c0b;
+  --color-dataviz-list-17: #ff7f6e;
+  --color-dataviz-list-18: #0ca750;
+  --color-dataviz-list-19: #ba7506;
+  --color-dataviz-placeholder: #c8cccc;
+  --color-userStatus-online: #0ca750;
+  --color-userStatus-offline: #ed4c42;
+  --color-userStatus-unavailable: #6e797a;
+  --color-DATAVIZ_COLORS_LIST-0: #08c4b2;
+  --color-DATAVIZ_COLORS_LIST-1: #6f5ed3;
+  --color-DATAVIZ_COLORS_LIST-2: #ce3665;
+  --color-DATAVIZ_COLORS_LIST-3: #ffcd1c;
+  --color-DATAVIZ_COLORS_LIST-4: #3876e3;
+  --color-DATAVIZ_COLORS_LIST-5: #db61db;
+  --color-DATAVIZ_COLORS_LIST-6: #59cb59;
+  --color-DATAVIZ_COLORS_LIST-7: #fc8943;
+  --color-DATAVIZ_COLORS_LIST-8: #db3e3e;
+  --color-DATAVIZ_COLORS_LIST-9: #026661;
+  --color-DATAVIZ_COLORS_LIST-10: #a193f2;
+  --color-DATAVIZ_COLORS_LIST-11: #931847;
+  --color-DATAVIZ_COLORS_LIST-12: #944c0c;
+  --color-DATAVIZ_COLORS_LIST-13: #0c3f89;
+  --color-DATAVIZ_COLORS_LIST-14: #6c2277;
+  --color-DATAVIZ_COLORS_LIST-15: #006b40;
+  --color-DATAVIZ_COLORS_LIST-16: #962c0b;
+  --color-DATAVIZ_COLORS_LIST-17: #ff7f6e;
+  --color-DATAVIZ_COLORS_LIST-18: #0ca750;
+  --color-DATAVIZ_COLORS_LIST-19: #ba7506;
+  --color-DATAVIZ_COLORS_MAP-1: #08c4b2;
+  --color-DATAVIZ_COLORS_MAP-2: #6f5ed3;
+  --color-DATAVIZ_COLORS_MAP-3: #ce3665;
+  --color-DATAVIZ_COLORS_MAP-4: #ffcd1c;
+  --color-DATAVIZ_COLORS_MAP-5: #3876e3;
+  --color-DATAVIZ_COLORS_MAP-6: #db61db;
+  --color-DATAVIZ_COLORS_MAP-7: #59cb59;
+  --color-DATAVIZ_COLORS_MAP-8: #fc8943;
+  --color-DATAVIZ_COLORS_MAP-9: #db3e3e;
+  --color-DATAVIZ_COLORS_MAP-10: #026661;
+  --color-DATAVIZ_COLORS_MAP-11: #a193f2;
+  --color-DATAVIZ_COLORS_MAP-12: #931847;
+  --color-DATAVIZ_COLORS_MAP-13: #944c0c;
+  --color-DATAVIZ_COLORS_MAP-14: #0c3f89;
+  --color-DATAVIZ_COLORS_MAP-15: #6c2277;
+  --color-DATAVIZ_COLORS_MAP-16: #006b40;
+  --color-DATAVIZ_COLORS_MAP-17: #962c0b;
+  --color-DATAVIZ_COLORS_MAP-18: #ff7f6e;
+  --color-DATAVIZ_COLORS_MAP-19: #0ca750;
+  --color-DATAVIZ_COLORS_MAP-20: #ba7506;
+  --color-PLACEHOLDER: #c8cccc;
+  --color-ai-feature-decorative-primary: #067c7c;
+  --color-ai-feature-decorative-secondary: #0c3f89;
+  --color-ai-feature-bg-primary: #067c7c;
+  --color-ai-feature-bg-secondary: #0c3f89;
+  --color-ai-feature-bg-default-primary: #067c7c;
+  --color-ai-feature-bg-default-secondary: #0c3f89;
+  --color-ai-feature-bg-inverse-primary: #cdf7ef;
+  --color-ai-feature-bg-inverse-secondary: #c7dbf9;
+  --color-navigation-main-bg-base: #273333;
+  --color-navigation-main-bg-overflowGradient: #162020;
+  --color-navigation-main-border-base: #162020;
+  --color-navigation-secondary-bg-base: #364141;
+  --color-navigation-secondary-widget-bg-base: #162020;
+  --color-navigation-secondary-accordion-bg-base: #273333;
+  --color-navigation-settings-listItem-bg-base: transparent;
+  --color-navigation-settings-listItem-bg-hover: #dee1e1;
+  --color-navigation-settings-listItem-bg-selected: #FFFFFF;
+  --color-navigation-text-base: #FFFFFF;
+  --color-navigation-text-hover: #FFFFFF;
+  --color-navigation-icon-base: #FFFFFF;
+  --color-navigation-icon-hover: #FFFFFF;
+  --color-navigation-listItem-bg-base: #364141;
+  --color-navigation-listItem-bg-hover: #162020;
+  --color-navigation-listItem-bg-selected: #515e5f;
+  --color-datePicker-comparison-bg-base: #b0b6b7;
+  --color-datePicker-comparison-text-base: #364141;
+  --color-analytics-trend-positive: #067c7c;
+  --color-analytics-trend-neutral: #364141;
+  --color-analytics-trend-negative: #364141;
+  --color-analytics-overlay-bg-base: color-mix(in srgb, #FFFFFF, transparent 20%);
+  --color-listening-chart-indicator-default-primary: #b0b6b7;
+  --color-listening-chart-indicator-default-secondary: #FFFFFF;
+  --color-listening-chart-indicator-hover-primary: #162020;
+  --color-listening-chart-indicator-hover-secondary: #FFFFFF;
+  --color-listening-chart-spike-bg-base: #08c4b2;
+  --color-listening-chart-spike-icon-base: #FFFFFF;
+  --color-listening-topicTypes-customTopic: #679eff;
+  --color-listening-topicTypes-brandHealth: #ff7f6e;
+  --color-listening-topicTypes-industryInsights: #75dd66;
+  --color-listening-topicTypes-competitiveAnalysis: #ffd943;
+  --color-listening-topicTypes-campaignAnalysis: #f282f5;
+  --color-listening-topicTypes-eventMonitoring: #33d6e2;
+  --color-listening-topicTypes-featuredTopic: #75dd66;
+  --color-listening-worldMap-empty: #dee1e1;
+  --color-listening-worldMap-q0: #d8d7f9;
+  --color-listening-worldMap-q1: #c1c1f7;
+  --color-listening-worldMap-q2: #a193f2;
+  --color-listening-worldMap-q3: #9180f4;
+  --color-listening-worldMap-q4: #816fea;
+  --color-listening-worldMap-q5: #6f5ed3;
+  --color-listening-worldMap-q6: #5e4eba;
+  --color-listening-worldMap-q7: #483a9c;
+  --color-growth-carousel-indicator-active: #2b68d3;
+  --color-growth-carousel-indicator-inactive: #c8cccc;
+  --color-growth-education-decorative-aqua: #0797ae;
+  --color-growth-education-decorative-teal: #0b968f;
+  --color-growth-opportunity-bg-base: #6f5ed3;
+  --color-growth-opportunity-bg-secondary: #273333;
+  --color-growth-opportunity-bg-hover: #c1c1f7;
+  --color-growth-opportunity-button-primary-base: #6f5ed3;
+  --color-growth-opportunity-button-primary-hover: #5e4eba;
+  --color-growth-opportunity-badge-bg-base: #d8d7f9;
+  --color-growth-opportunity-badge-bg-active: #5e4eba;
+  --color-growth-opportunity-badge-icon-base: #6f5ed3;
+  --color-growth-opportunity-badge-icon-active: #eaeaf9;
+  --color-growth-opportunity-badge-text-base: #6f5ed3;
+  --color-growth-opportunity-decorative-green: #0ca750;
+  --color-growth-opportunity-decorative-lightAqua: #0797ae;
+  --color-growth-opportunity-decorative-darkAqua: #002838;
+  --color-growth-opportunity-decorative-purple: #6f5ed3;
+  --color-growth-featuredDemo-bg-primary-base: #205bc3;
+  --color-growth-featuredDemo-bg-primary-hover: #0c3f89;
+  --color-growth-featuredDemo-bg-secondary-base: #5e4eba;
+  --color-growth-featuredDemo-bg-secondary-hover: #5e4eba;
+  --color-growth-darkModal-bg-base: #002838;
+  --color-growth-darkModal-text-base: #FFFFFF;
+  --color-growth-darkModal-cards-bg-base: #FFFFFF;
+  --color-growth-darkModal-cards-bg-hover: #eaeaf9;
+  --color-growth-darkModal-cards-text-base: #364141;
+  --color-growth-darkModal-cards-text-hover: #273333;
+  --color-growth-darkModal-cards-border-base: #FFFFFF;
+  --color-growth-darkModal-cards-border-hover: #6f5ed3;
+  --color-growth-user-status-online: #0ca750;
+  --color-cardControl-bg-base: #FFFFFF;
+  --color-cardControl-bg-selected: #364141;
+  --color-cardControl-bg-hover: #f3f4f4;
+  --color-cardControl-text-selected: #FFFFFF;
+  --color-tags-collections-bg-base: #f3f4f4;
+  --space-0: 0px;
+  --space-100: 2px;
+  --space-200: 4px;
+  --space-300: 8px;
+  --space-350: 12px;
+  --space-400: 16px;
+  --space-450: 24px;
+  --space-500: 32px;
+  --space-600: 40px;
+  --font-size-100: 11px;
+  --font-size-200: 13px;
+  --font-size-300: 16px;
+  --font-size-400: 18px;
+  --font-size-500: 21px;
+  --font-size-600: 24px;
+  --font-size-700: 32px;
+  --font-size-800: 43px;
+  --font-size-900: 57px;
+  --font-size-1000: 76px;
+  --font-size-1100: 101px;
+  --font-size-1200: 135px;
+  --line-height-100: 18.666666666666668px;
+  --line-height-200: 21.333333333333332px;
+  --line-height-300: 24px;
+  --line-height-400: 26.666666666666668px;
+  --line-height-500: 29.333333333333332px;
+  --line-height-600: 32px;
+  --line-height-700: 40px;
+  --line-height-800: 50.666666666666664px;
+  --line-height-900: 64px;
+  --line-height-1000: 80px;
+  --line-height-1100: 101.33333333333333px;
+  --line-height-1200: 125.33333333333333px;
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --radius-400: 4px;
+  --radius-500: 6px;
+  --radius-600: 8px;
+  --radius-800: 12px;
+  --radius-900: 24px;
+  --radius-1000: 999999px;
+  --radius-inner: 6px;
+  --radius-outer: 8px;
+  --radius-pill: 999999px;
+  --border-width-500: 1px;
+  --border-width-600: 2px;
+  --border-width-700: 3px;
+  --shadow-low: 0px 2px 4px var(--color-elevation-base);
+  --shadow-medium: 0px 8px 16px var(--color-elevation-base);
+  --shadow-high: 0px 16px 32px var(--color-elevation-base);
+  --ease-ease_in: cubic-bezier(.4, 0, .7, .2);
+  --ease-ease_out: cubic-bezier(0, 0, .2, 1);
+  --ease-ease_inout: cubic-bezier(.4, 0, .2, 1);
+  --duration-fast: .15s;
+  --duration-medium: .3s;
+  --duration-slow: .6s;
+}