/* Tidewell design system · Sanzo Wada combination 194: Jasper Red #eb5324 · Seashell Pink #fdd4bd · Olympic Blue #5a82b3
   Fonts: https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600&display=swap */
:root {
  color-scheme: light;
  /* palette */
  --palette-jasper-red:          #eb5324;
  --palette-seashell-pink:       #fdd4bd;
  --palette-olympic-blue:        #5a82b3;

  /* colour roles (light) */
  --color-background:            #fdd4bd;
  --color-foreground:            #15171c;
  --color-body:                  #685b56;
  --color-surface:               #fee6d9;
  --color-surface-foreground:    #15171c;
  --color-muted:                 #f3ccb5;
  --color-muted-foreground:      #685b56;
  --color-border:                #ffffffbf;
  --color-border-strong:         #15171c47;
  --color-input:                 #ffffff8c;
  --color-input-background:      #fef0e7;
  --color-ring:                  #5a82b3;
  --color-primary:               #15171c;
  --color-primary-foreground:    #ffffff;
  --color-secondary:             #eb5324;
  --color-secondary-foreground:  #15171c;
  --color-accent:                #eb5324;
  --color-accent-foreground:     #15171c;
  --color-inverse:               #15171c;
  --color-inverse-foreground:    #fdd4bd;
  --color-inverse-muted:         #a58c80;
  --color-inverse-border:        #fdd4bd29;
  --color-destructive:           #eb5324;
  --color-destructive-foreground: #111111;

  /* type */
  --font-display:                Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:                   Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display:                clamp(48px, 7.2vw, 110px);
  --text-display--line-height:   0.96;
  --text-display--letter-spacing: -0.052em;
  --text-display--font-weight:   600;
  --text-h1:                     clamp(42px, 5.6vw, 84px);
  --text-h1--line-height:        0.98;
  --text-h1--letter-spacing:     -0.045em;
  --text-h1--font-weight:        600;
  --text-h2:                     clamp(36px, 4.6vw, 66px);
  --text-h2--line-height:        1;
  --text-h2--letter-spacing:     -0.045em;
  --text-h2--font-weight:        600;
  --text-h3:                     clamp(17px, 1.4vw, 20px);
  --text-h3--line-height:        1.55;
  --text-h3--letter-spacing:     -0.02em;
  --text-h3--font-weight:        600;
  --text-lead:                   clamp(17px, 1.4vw, 20px);
  --text-lead--line-height:      1.5;
  --text-lead--letter-spacing:   0;
  --text-lead--font-weight:      400;
  --text-body:                   16.5px;
  --text-body--line-height:      1.55;
  --text-body--letter-spacing:   0;
  --text-body--font-weight:      400;
  --text-small:                  13.5px;
  --text-small--line-height:     1.55;
  --text-small--letter-spacing:  0;
  --text-small--font-weight:     400;
  --text-eyebrow:                12.5px;
  --text-eyebrow--line-height:   1.55;
  --text-eyebrow--letter-spacing: 0;
  --text-eyebrow--font-weight:   600;

  /* space and layout */
  --space-1:                     4px;
  --space-2:                     6px;
  --space-3:                     10px;
  --space-4:                     14px;
  --space-5:                     22px;
  --space-6:                     32px;
  --space-7:                     48px;
  --space-8:                     64px;
  --container:                   1240px;
  --gutter:                      clamp(16px, 3vw, 40px);
  --section-y:                   clamp(88px, 10vw, 150px);

  /* shape */
  --radius-sm:                   14px;
  --radius-md:                   32px;
  --radius-lg:                   clamp(28px, 3vw, 44px);
  --radius-pill:                 9999px;
  --shadow-sm:                   rgba(21, 23, 28, 0.5) 0px 6px 16px -10px, rgba(255, 255, 255, 0.75) 0px 1px 0px 0px inset;
  --shadow-md:                   rgb(235, 83, 36) 0px 10px 22px -12px;
  --shadow-lg:                   rgba(21, 23, 28, 0.6) 0px 20px 40px -14px;
  --shadow-ring:                 rgba(255, 255, 255, 0.75) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.4) 0px 0px 0px 1px inset, rgba(21, 23, 28, 0.3) 0px 30px 60px -30px;
  --backdrop:                    blur(22px) saturate(1.45);

  /* motion */
  --ease-out:                    cubic-bezier(.22, .8, .2, 1);
  --ease-in-out:                 cubic-bezier(.76, 0, .24, 1);
  --duration-fast:               250ms;
  --duration-base:               500ms;
  --duration-slow:               1250ms;
}

/* dark theme: <html data-theme="dark"> or class="dark" */
[data-theme="dark"], .dark {
  color-scheme: dark;
  --color-background:            #15171c;
  --color-foreground:            #ffffff;
  --color-body:                  #afb0b2;
  --color-surface:               #212327;
  --color-surface-foreground:    #ffffff;
  --color-muted:                 #2b2b2b;
  --color-muted-foreground:      #afb0b2;
  --color-border:                #ffffff38;
  --color-border-strong:         #ffffff47;
  --color-input:                 #ffffff1f;
  --color-input-background:      #212327;
  --color-ring:                  #5a82b3;
  --color-primary:               #fdd4bd;
  --color-primary-foreground:    #15171c;
  --color-secondary:             #eb5324;
  --color-secondary-foreground:  #15171c;
  --color-accent:                #fdd4bd;
  --color-accent-foreground:     #15171c;
  --color-inverse:               #ffffff;
  --color-inverse-foreground:    #15171c;
  --color-inverse-muted:         #6e6f72;
  --color-inverse-border:        #15171c29;
  --color-destructive:           #ed683e;
  --color-destructive-foreground: #111111;
}

/* breakpoints (desktop-first): 760px, 900px, 960px, 1080px */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
}