/* Nijimi design system · Sanzo Wada combination 28: Madder Brown #762c19 · Deep Indigo #051230
   Fonts: https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap */
:root {
  color-scheme: light;
  /* palette */
  --palette-madder-brown:        #762c19;
  --palette-deep-indigo:         #051230;

  /* colour roles (light) */
  --color-background:            #f3f2ee;
  --color-foreground:            #051230;
  --color-body:                  #66676a;
  --color-surface:               #fbfbf9;
  --color-surface-foreground:    #051230;
  --color-muted:                 #eeede9;
  --color-muted-foreground:      #66676a;
  --color-border:                #0810311f;
  --color-border-strong:         #05123238;
  --color-input:                 #0810311f;
  --color-input-background:      #fbfbf9;
  --color-ring:                  #762c19;
  --color-primary:               #051230;
  --color-primary-foreground:    #f3f2ee;
  --color-secondary:             #762c19;
  --color-secondary-foreground:  #ffffff;
  --color-accent:                #051230;
  --color-accent-foreground:     #f3f2ee;
  --color-inverse:               #66676a;
  --color-inverse-foreground:    #f3f2ee;
  --color-inverse-muted:         #bdbdbc;
  --color-inverse-border:        #f3f2ee29;
  --color-destructive:           #762c19;
  --color-destructive-foreground: #ffffff;

  /* type */
  --font-display:                "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", ui-serif, Georgia, serif;
  --font-body:                   "Zen Kaku Gothic New", "Hiragino Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display:                clamp(42px, 5.6vw, 92px);
  --text-display--line-height:   1.08;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight:   500;
  --text-h2:                     clamp(30px, 3.2vw, 50px);
  --text-h2--line-height:        1.16;
  --text-h2--letter-spacing:     -0.01em;
  --text-h2--font-weight:        500;
  --text-h3:                     clamp(22px, 1.9vw, 30px);
  --text-h3--line-height:        1.3;
  --text-h3--letter-spacing:     -0.01em;
  --text-h3--font-weight:        500;
  --text-lead:                   clamp(17px, 1.3vw, 20px);
  --text-lead--line-height:      1.75;
  --text-lead--letter-spacing:   0.009em;
  --text-lead--font-weight:      400;
  --text-body:                   16px;
  --text-body--line-height:      1.75;
  --text-body--letter-spacing:   0.01em;
  --text-body--font-weight:      400;
  --text-small:                  14px;
  --text-small--line-height:     1.75;
  --text-small--letter-spacing:  0.011em;
  --text-small--font-weight:     400;
  --text-eyebrow:                12.5px;
  --text-eyebrow--line-height:   1.75;
  --text-eyebrow--letter-spacing: 0.14em;
  --text-eyebrow--font-weight:   500;

  /* space and layout */
  --space-1:                     4px;
  --space-2:                     6px;
  --space-3:                     10px;
  --space-4:                     14px;
  --space-5:                     22px;
  --space-6:                     30px;
  --space-7:                     48px;
  --space-8:                     64px;
  --container:                   1600px;
  --gutter:                      clamp(20px, 5.2vw, 96px);
  --section-y:                   clamp(96px, 11vw, 184px);

  /* shape */
  --radius-sm:                   2px;
  --radius-md:                   3px;
  --radius-lg:                   3px;
  --shadow-ring:                 rgba(5, 18, 48, 0.22) 0px 0px 0px 1px inset;

  /* motion */
  --ease-in-out:                 cubic-bezier(.65, 0, .35, 1);
  --ease-out:                    cubic-bezier(.22, .61, .36, 1);
  --duration-fast:               400ms;
  --duration-base:               900ms;
  --duration-slow:               1600ms;
}

/* dark theme: <html data-theme="dark"> or class="dark" */
[data-theme="dark"], .dark {
  color-scheme: dark;
  --color-background:            #051230;
  --color-foreground:            #f3f2ee;
  --color-body:                  #a6a7aa;
  --color-surface:               #111d39;
  --color-surface-foreground:    #f3f2ee;
  --color-muted:                 #0e1b37;
  --color-muted-foreground:      #a6a7aa;
  --color-border:                #f0f0f021;
  --color-border-strong:         #f2f2ee3d;
  --color-input:                 #f0f0f021;
  --color-input-background:      #111d39;
  --color-ring:                  #762c19;
  --color-primary:               #f3f2ee;
  --color-primary-foreground:    #051230;
  --color-secondary:             #762c19;
  --color-secondary-foreground:  #ffffff;
  --color-accent:                #762c19;
  --color-accent-foreground:     #ffffff;
  --color-inverse:               #f3f2ee;
  --color-inverse-foreground:    #051230;
  --color-inverse-muted:         #5f6778;
  --color-inverse-border:        #05123029;
  --color-destructive:           #864535;
  --color-destructive-foreground: #ffffff;
}

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