/* Halden design system · Sanzo Wada combination 190: Ivory Buff #ebd3a2 · English Red #d96629 · Black #111314
   Fonts: https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Newsreader:wght@400&display=swap */
:root {
  color-scheme: light;
  /* palette */
  --palette-ivory-buff:          #ebd3a2;
  --palette-english-red:         #d96629;
  --palette-black:               #111314;

  /* colour roles (light) */
  --color-background:            #f1f0ec;
  --color-foreground:            #111314;
  --color-body:                  #111314;
  --color-surface:               #fbfaf7;
  --color-surface-foreground:    #111314;
  --color-muted:                 #e9e7e1;
  --color-muted-foreground:      #63645f;
  --color-border:                #1010101f;
  --color-border-strong:         #0f141433;
  --color-input:                 #1010101f;
  --color-input-background:      #fbfaf7;
  --color-ring:                  #d96629;
  --color-primary:               #111314;
  --color-primary-foreground:    #f1f0ec;
  --color-secondary:             #d96629;
  --color-secondary-foreground:  #111314;
  --color-accent:                #d96629;
  --color-accent-foreground:     #111314;
  --color-inverse:               #111314;
  --color-inverse-foreground:    #f1f0ec;
  --color-inverse-muted:         #9c9c9a;
  --color-inverse-border:        #f1f0ec29;
  --color-destructive:           #dd4027;
  --color-destructive-foreground: #ffffff;

  /* type */
  --font-display:                "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:                   "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent:                 "Newsreader", ui-serif, Georgia, serif;
  --text-display:                clamp(64px, 1.34rem + 10.91vw, 178.56px);
  --text-display--line-height:   0.82;
  --text-display--letter-spacing: -0.065em;
  --text-display--font-weight:   600;
  --text-h2:                     clamp(36px, 4.4vw, 68px);
  --text-h2--line-height:        0.98;
  --text-h2--letter-spacing:     -0.045em;
  --text-h2--font-weight:        500;
  --text-h3:                     18.72px;
  --text-h3--line-height:        1.55;
  --text-h3--letter-spacing:     -0.009em;
  --text-h3--font-weight:        700;
  --text-lead:                   clamp(18px, 1.45vw, 22px);
  --text-lead--line-height:      1.4;
  --text-lead--letter-spacing:   -0.015em;
  --text-lead--font-weight:      400;
  --text-body:                   16px;
  --text-body--line-height:      1.55;
  --text-body--letter-spacing:   -0.01em;
  --text-body--font-weight:      400;
  --text-small:                  14px;
  --text-small--line-height:     1.55;
  --text-small--letter-spacing:  -0.011em;
  --text-small--font-weight:     400;
  --text-eyebrow:                13px;
  --text-eyebrow--line-height:   1.55;
  --text-eyebrow--letter-spacing: -0.012em;
  --text-eyebrow--font-weight:   400;

  /* space and layout */
  --space-1:                     2px;
  --space-2:                     4px;
  --space-3:                     6px;
  --space-4:                     10px;
  --space-5:                     14px;
  --space-6:                     22px;
  --space-7:                     32px;
  --space-8:                     48px;
  --space-9:                     64px;
  --container:                   1680px;
  --gutter:                      clamp(18px, 2.4vw, 36px);
  --section-y:                   clamp(88px, 10vw, 168px);

  /* shape */
  --radius-sm:                   12px;
  --radius-md:                   18px;
  --radius-lg:                   clamp(20px, 2.2vw, 32px);
  --radius-pill:                 9999px;
  --shadow-sm:                   rgba(0, 0, 0, 0.8) 0px 40px 70px -30px;
  --shadow-ring:                 rgba(17, 19, 20, 0.12) 0px 0px 0px 1px inset;
  --backdrop:                    blur(18px) saturate(1.4);

  /* motion */
  --ease-in-out:                 cubic-bezier(.76, 0, .24, 1);
  --ease-out:                    cubic-bezier(.16, 1, .3, 1);
  --duration-fast:               350ms;
  --duration-base:               700ms;
  --duration-slow:               1200ms;
}

/* dark theme: <html data-theme="dark"> or class="dark" */
[data-theme="dark"], .dark {
  color-scheme: dark;
  --color-background:            #111314;
  --color-foreground:            #f1f0ec;
  --color-body:                  #f1f0ec;
  --color-surface:               #1b1d1e;
  --color-surface-foreground:    #f1f0ec;
  --color-muted:                 #1a1c1d;
  --color-muted-foreground:      #a3a49f;
  --color-border:                #efefef1f;
  --color-border-strong:         #f0f0eb33;
  --color-input:                 #efefef1f;
  --color-input-background:      #1b1d1e;
  --color-ring:                  #d96629;
  --color-primary:               #f1f0ec;
  --color-primary-foreground:    #111314;
  --color-secondary:             #111314;
  --color-secondary-foreground:  #ffffff;
  --color-accent:                #d96629;
  --color-accent-foreground:     #111314;
  --color-inverse:               #fbfaf7;
  --color-inverse-foreground:    #111314;
  --color-inverse-muted:         #6a6b6a;
  --color-inverse-border:        #11131429;
  --color-destructive:           #e15741;
  --color-destructive-foreground: #111111;
}

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