@import '@lotsof/sugarcss/src/css/sugarcss.css';

@include s-reset;

body:has(.s-factory),
.s-carpenter-daemon {
  --s-setting-verbose: false;
  --s-setting-mobile-first: false;

  --s-scrolled-classes-class: scrolled;
  --s-scrolled-classes-offset: 50;

  --s-media-xs: 0 474px;
  --s-media-sm: 475 639px;
  --s-media-md: 640px 767px;
  --s-media-lg: 768px 1023px;
  --s-media-xl: 1024px 1279px;
  --s-media-xxl: 1280px;

  --s-container-default: 320px 1280px 20px;

  --s-shadow-default: 0px 0.7px 2.2px rgba(0, 0, 0, 0.011),
    0px 1.7px 5.3px rgba(0, 0, 0, 0.016), 0px 3.1px 10px rgba(0, 0, 0, 0.02),
    0px 5.6px 17.9px rgba(0, 0, 0, 0.024),
    0px 10.4px 33.4px rgba(0, 0, 0, 0.029), 0px 25px 80px rgba(0, 0, 0, 0.04);

  --s-color-main: #878787;
  --s-color-accent: #40a1bf;
  --s-color-complementary: #9ec468;
  --s-color-ternary: #9ec468;
  --s-color-current: #40a1bf;
  --s-color-success: #91ff00;
  --s-color-warning: #ffd500;
  --s-color-error: #ff003b;
  --s-color-info: #00ffff;
  --s-color-php: #777cb5;

  --s-shade-text: --desaturate 50 --darken 20;
  --s-shade-form: --desaturate 50 --alpha 1;
  --s-shade-form-background: --lightness 100;
  --s-shade-text-main: --darken 35;
  --s-shade-placeholder: --alpha 0.4;
  --s-shade-foreground: --lightness 94;
  --s-shade-background: --lightness 100;
  --s-shade-icon: --alpha 0.7;
  --s-shade-surface: --lightness 94;
  --s-shade-border: --lightness 94;
  --s-shade-hover: --lighten 10;
  --s-shade-active: --darken 10;

  --s-font-family-sans: 'Poppins', sans-serif;
  --s-font-family-serif: 'Merriweather', serif;
  --s-font-family-code: 'Monaco', sans-serif;
  --s-font-family-quote: 'Palatino', serif;

  --s-font-serif: s-font-family(serif) 300;
  --s-font-body: s-font-family(sans) 300;
  --s-font-lead: s-font-family(sans) 300;
  --s-font-title: s-font-family(sans) 400;
  --s-font-suptitle: s-font-family(sans) 300;
  --s-font-subtitle: s-font-family(sans) 300;
  --s-font-p: s-font-family(sans) 300;
  --s-font-tagline: s-font-family(sans) 300;
  --s-font-code: s-font-family(code);
  --s-font-quote: s-font-family(sans) 300;

  --s-typo-body: s-font(body) s-size(body) 1.3;
  --s-typo-h1: s-font(title) s-size(h1) 1.1;
  --s-typo-h2: s-font(title) s-size(h2) 1.2;
  --s-typo-h3: s-font(title) s-size(h3) 1.1;
  --s-typo-h4: s-font(title) s-size(h4) var(--s-lineheight-h4);
  --s-typo-h5: s-font(title) s-size(h5) 1.1;
  --s-typo-h6: s-font(title) s-size(h6) 1.1;
  --s-typo-suptitle: s-font(suptitle) s-size(suptitle) 1.2 0 uppercase;
  --s-typo-subtitle: s-font(subtitle) s-size(subtitle) 1.2 0 uppercase;
  --s-typo-lead: s-font(lead) s-size(lead) 1.2;
  --s-typo-p: s-font(p) s-size(p) var(--s-lineheight-p);
  --s-typo-tagline: s-font(tagline) s-size(tagline) 1.8 0 uppercase;
  --s-typo-quote: s-font(quote) s-size(quote) 1.3;
  --s-typo-id: s-font(code) s-size(id);
  --s-typo-code: s-font(code) s-size(code);
  --s-typo-label: s-font(p) s-size(label);
  --s-typo-button: s-font(body) s-size(button) var(--s-lineheight-p);
  --s-typo-menu: s-font(body) s-size(menu) 1.2;

  --s-ease-default: cubic-bezier(0.745, 0, 0.18, 1);

  --s-transition-slow: all 0.3s cubic-bezier(0.745, 0, 0.18, 1);
  --s-transition-default: all 0.2s cubic-bezier(0.745, 0, 0.18, 1);
  --s-transition-fast: all 0.1s cubic-bezier(0.745, 0, 0.18, 1);

  --s-sizes: 0, 80px, linear;
  --s-spaces: 0, 80px, linear;

  --s-space-05: 2px;
  --s-space-1: 4px;
  --s-space-2: 8px;
  --s-space-3: 12px;
  --s-space-4: 16px;
  --s-space-5: 20px;
  --s-space-6: 24px;
  --s-space-7: 28px;
  --s-space-8: 32px;
  --s-space-10: 40px;
  --s-space-12: 48px;
  --s-space-16: 64px;
  --s-space-20: 80px;
  --s-space-24: 96px;
  --s-space-28: 112px;
  --s-space-32: 128px;
  --s-space-40: 160px;
  --s-space-48: 192px;
  --s-space-56: 224px;
  --s-space-64: 256px;
  --s-space-72: 288px;
  --s-space-80: 320px;
  --s-space-88: 352px;
  --s-space-96: 384px;

  --s-space-xs: 5px;
  --s-space-sm: 10px;
  --s-space-md: 20px;
  --s-space-lg: 40px;
  --s-space-xl: 80px;

  --s-size-body: 16px;
  --s-size-h1: 40px;
  --s-size-h2: 30px;
  --s-size-h3: 25px;
  --s-size-h4: 20px;
  --s-size-suptitle: 16px;
  --s-size-subtitle: 16px;
  --s-size-tagline: 16px;
  --s-size-lead: 20px;
  --s-size-p: 16px;
  --s-size-form: 14px;
  --s-size-button: 14px;
  --s-size-label: 14px;
  --s-size-caption: 12px;
  --s-size-code: 16px;
  --s-size-menu: 14px;
  --s-size-quote: 25px;
  --s-size-tooltip: 16px;
  --s-size-id: 14px;
  --s-size-notification: 14px;
  --s-size-error: 12px;
  --s-size-small: 12px;
  --s-size-large: 20px;

  --s-radius-default: 6px;
}

.-dark,
body.-dark {
  --s-color-main: hsl(47, 0%, 50%);
  --s-color-error: #ff7b9a;

  --s-shade-text: --desaturate 50 --lightness 100;
  --s-shade-form: --alpha 1 --lightness 100;
  --s-shade-form-background: --lightness 24;
  --s-shade-text-main: --ligtnedd 90;
  --s-shade-background: --lightness 16;
  --s-shade-surface: --lightness 94;
  --s-shade-border: --lightness 26;
  --s-shade-surface: --lightness 22;
}

::selection {
  background: s-color(accent, --darken 10);
  color: s-color(accent, --lighten 50);
}

body {
  @s-typo (body);
  color: s-color(main, text);
}