:root {
        --cl-accent: 56,157,255;
        --cl-on-accent: 255,255,255;
        --cl-success: 49,212,140;
        --cl-warning: 255,176,32;
        --cl-error: 240,93,93;
        --cl-overlay: rgba(5,7,11, 0.6);

        
        
        --ff-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
        --ff-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
        --fw-heading: 700;
        --fw-body: 400;
        
        --heading-scale: 1;

        --radius-card: 24px;
        --radius-input: 16px;
        --radius-badge: 9999px;
        
        --radius-button: 9999px;

        --border-w: 1px;
        --shadow-card: var(--shadow-preset-lg);
        --shadow-button: var(--shadow-preset-md);
        --shadow-nav: var(--shadow-preset-sm);
        --shadow-modal: var(--shadow-preset-md);

        --section-py: 24px;
        --section-gap: 0px;
        
        --container-max: 1360px;
        
        --density: 1;
        --card-pad: calc(1.25rem * var(--density));
        --grid-gap: calc(1.25rem * var(--density));

        --dur: 200ms;
        --announcement-duration: 25s;

        --product-card-image-aspect-ratio: 16/9;
        --product-page-image-aspect-ratio: 16/9;
        --group-card-image-aspect-ratio: 16/9;
        --blog-card-image-aspect-ratio: 16/9;
        --product-image-fit: cover;
        --group-image-fit: cover;
      }

      [data-scheme="light"] {
        color-scheme: light;
        --cl-background: 248,246,251;
        --cl-surface: 255,255,255;
        --cl-surface-raised: 241,234,247;
        --cl-t-primary: 27,18,36;
        --cl-t-muted: 122,110,133;
        --cl-border: rgba(230,220,239, 0.25);
      }

      [data-scheme="dark"] {
        color-scheme: dark;
        --cl-background: 7,13,24;
        --cl-surface: 14,25,43;
        --cl-surface-raised: 21,38,62;
        --cl-t-primary: 240,247,255;
        --cl-t-muted: 151,174,203;
        --cl-border: rgba(52,94,143, 0.18);
      }

      html {
        font-size: 16px;
      }

      body {
        font-family: var(--ff-body);
        font-weight: var(--fw-body);
      }

      h1, h2, h3, h4, h5, h6 {
        font-family: var(--ff-heading);
        font-weight: var(--fw-heading);
      }