/* Swiss design system · Sanzo Wada combination 31: Red Orange #dd4027 · Pale Lemon Yellow #ffefae
   Fonts: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap */
:root {
  color-scheme: light;
  /* palette */
  --palette-red-orange:          #dd4027;
  --palette-pale-lemon-yellow:   #ffefae;

  /* colour roles (light) */
  --color-background:            #ffffff;
  --color-foreground:            #111111;
  --color-body:                  #5b5b5b;
  --color-surface:               #dd4027;
  --color-surface-foreground:    #111111;
  --color-muted:                 #f5f5f5;
  --color-muted-foreground:      #5b5b5b;
  --color-border:                #11111124;
  --color-border-strong:         #11111147;
  --color-input:                 #11111124;
  --color-input-background:      #dd4027;
  --color-ring:                  #dd4027;
  --color-primary:               #dd4027;
  --color-primary-foreground:    #111111;
  --color-secondary:             #f5f5f5;
  --color-secondary-foreground:  #111111;
  --color-accent:                #dd4027;
  --color-accent-foreground:     #111111;
  --color-inverse:               #111111;
  --color-inverse-foreground:    #ffffff;
  --color-inverse-muted:         #a5a5a5;
  --color-inverse-border:        #ffffff29;
  --color-destructive:           #dd4027;
  --color-destructive-foreground: #ffffff;

  /* type */
  --font-display:                Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:                   Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-display:                clamp(54px, 2.09rem + 5.28vw, 109.44px);
  --text-display--line-height:   0.88;
  --text-display--letter-spacing: -0.045em;
  --text-display--font-weight:   800;
  --text-h2:                     clamp(33px, 1.25rem + 3.32vw, 67.85px);
  --text-h2--line-height:        0.88;
  --text-h2--letter-spacing:     -0.045em;
  --text-h2--font-weight:        800;
  --text-h3:                     clamp(19px, 1.13rem + 0.25vw, 21.6px);
  --text-h3--line-height:        1.15;
  --text-h3--letter-spacing:     -0.015em;
  --text-h3--font-weight:        700;
  --text-lead:                   19.87px;
  --text-lead--line-height:      1.4;
  --text-lead--letter-spacing:   0;
  --text-lead--font-weight:      400;
  --text-body:                   clamp(15px, 0.9rem + 0.15vw, 16.56px);
  --text-body--line-height:      1.4;
  --text-body--letter-spacing:   0;
  --text-body--font-weight:      400;
  --text-small:                  14.49px;
  --text-small--line-height:     1.4;
  --text-small--letter-spacing:  0;
  --text-small--font-weight:     400;
  --text-eyebrow:                13.25px;
  --text-eyebrow--line-height:   1.4;
  --text-eyebrow--letter-spacing: 0.04em;
  --text-eyebrow--font-weight:   500;

  /* space and layout */
  --space-1:                     2px;
  --space-2:                     4px;
  --space-3:                     6px;
  --space-4:                     8px;
  --space-5:                     12px;
  --space-6:                     16px;
  --space-7:                     24px;
  --space-8:                     32px;
  --space-9:                     48px;
  --space-10:                    64px;
  --container:                   1280px;
  --gutter:                      32px;
  --section-y:                   clamp(64px, 3.26rem + 3.05vw, 96px);

  /* shape */
  --radius-sm:                   0px;
  --radius-md:                   0px;
  --radius-lg:                   0px;


  /* motion */

  --duration-fast:               250ms;
  --duration-base:               700ms;
  --duration-slow:               1000ms;
}

/* dark theme (derived: the template ships one theme): <html data-theme="dark"> or class="dark" */
[data-theme="dark"], .dark {
  color-scheme: dark;
  --color-background:            #111111;
  --color-foreground:            #ffffff;
  --color-body:                  #e2e2e2;
  --color-surface:               #1f1f1f;
  --color-surface-foreground:    #ffffff;
  --color-muted:                 #292929;
  --color-muted-foreground:      #a5a5a5;
  --color-border:                #ffffff24;
  --color-border-strong:         #ffffff42;
  --color-input:                 #ffffff33;
  --color-input-background:      #1d1d1d;
  --color-ring:                  #dd4027;
  --color-primary:               #dd4027;
  --color-primary-foreground:    #111111;
  --color-secondary:             #2e2e2e;
  --color-secondary-foreground:  #ffffff;
  --color-accent:                #dd4027;
  --color-accent-foreground:     #111111;
  --color-inverse:               #ffffff;
  --color-inverse-foreground:    #111111;
  --color-inverse-muted:         #6b6b6b;
  --color-inverse-border:        #11111129;
  --color-destructive:           #e15741;
  --color-destructive-foreground: #111111;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
}