:root{
  /* Yume design tokens v1.0 · 2026-09-08 · primitiivid */
  --yoru-50: #F3F0F7;
  --yoru-100: #E6E0EE;
  --yoru-200: #CFC4DE;
  --yoru-300: #AE9EC4;
  --yoru-400: #8A77A6;
  --yoru-500: #6A5787;
  --yoru-600: #4F3D69;
  --yoru-700: #3B2C52;
  --yoru-800: #2B1F3E;
  --yoru-900: #1E1530;
  --yoru-950: #140D22;
  --asa-50: #FDF3EE;
  --asa-100: #FBE3D8;
  --asa-200: #F6C6B1;
  --asa-300: #F0AB8E;
  --asa-400: #E9946E;
  --asa-500: #D9784F;
  --asa-600: #C0623A;
  --asa-700: #9C4D2C;
  --asa-800: #7A3D24;
  --asa-900: #5C2E1C;
  --kasumi-100: #EFEAF4;
  --kasumi-200: #D8D0E2;
  --kasumi-300: #C3B8D2;
  --kasumi-400: #A99BBD;
  --washi-50: #FBF9F5;
  --washi-100: #F5F1EA;
  --washi-200: #ECE6DC;
  --washi-300: #E0D8CB;
  --washi-400: #CFC5B6;
  --washi-500: #B3A897;
  --washi-600: #8E8477;
  --washi-700: #6B6358;
  --washi-800: #4A443C;
  --washi-900: #2E2A25;
  --green-100: #E3F0E8;
  --green-500: #3F7D5C;
  --green-600: #2F6B4F;
  --amber-100: #FBF0DC;
  --amber-500: #C98A2E;
  --amber-600: #A06E21;
  --red-100: #F9E2DF;
  --red-500: #C4473B;
  --red-600: #A33A30;
  --white: #FFFFFF;
  --black: #000000;
  /* semantilised värvid */
  --color-bg-page: var(--washi-100);
  --color-bg-surface: var(--washi-50);
  --color-bg-subtle: var(--washi-200);
  --color-bg-inverse: var(--yoru-800);
  --color-bg-inverse-raised: var(--yoru-700);
  --color-bg-brand: var(--yoru-800);
  --color-bg-brand-hover: var(--yoru-700);
  --color-bg-accent: var(--asa-400);
  --color-bg-accent-subtle: var(--asa-100);
  --color-bg-tint: var(--kasumi-200);
  --color-bg-success: var(--green-100);
  --color-bg-warning: var(--amber-100);
  --color-bg-error: var(--red-100);
  --color-bg-disabled: var(--washi-300);
  --color-text-default: var(--yoru-900);
  --color-text-muted: var(--yoru-500);
  --color-text-subtle: var(--washi-600);
  --color-text-inverse: var(--washi-100);
  --color-text-inverse-muted: var(--kasumi-300);
  --color-text-brand: var(--yoru-800);
  --color-text-accent: var(--asa-600);
  --color-text-on-accent: var(--yoru-900);
  --color-text-on-brand: var(--washi-100);
  --color-text-success: var(--green-600);
  --color-text-warning: var(--amber-600);
  --color-text-error: var(--red-600);
  --color-text-disabled: var(--washi-500);
  --color-border-default: var(--washi-300);
  --color-border-strong: var(--washi-500);
  --color-border-inverse: var(--yoru-600);
  --color-border-accent: var(--asa-400);
  --color-border-focus: var(--asa-500);
  --color-border-error: var(--red-500);
  --color-icon-default: var(--yoru-800);
  --color-icon-muted: var(--yoru-500);
  --color-icon-inverse: var(--washi-100);
  --color-icon-accent: var(--asa-400);
  --color-icon-on-brand: var(--washi-100);
  /* spacing */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  /* radius */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  /* size */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-control-sm: 36px;
  --size-control-md: 44px;
  --size-control-lg: 52px;
  --size-touch-min: 44px;
  /* stroke */
  --stroke-hairline: 1px;
  --stroke-default: 1.5px;
  --stroke-strong: 2px;
  --stroke-logo: 8px;
  /* tüpograafia */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-kanji: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;
  --font-size-6xl: 96px;
  --font-size-door: 120px;
}

/* Tekstistiilid */
.t-display-hero{font-family:var(--font-display);font-weight:700;font-size:96px;line-height:100px;letter-spacing:-3px;}
.t-display-l{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:68px;letter-spacing:-2px;}
.t-display-m{font-family:var(--font-display);font-weight:600;font-size:48px;line-height:54px;letter-spacing:-1.2px;}
.t-heading-1{font-family:var(--font-display);font-weight:600;font-size:36px;line-height:42px;letter-spacing:-0.8px;}
.t-heading-2{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:34px;letter-spacing:-0.5px;}
.t-heading-3{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:28px;letter-spacing:-0.2px;}
.t-heading-4{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:24px;letter-spacing:0px;}
.t-body-l{font-family:var(--font-body);font-weight:400;font-size:18px;line-height:28px;letter-spacing:0px;}
.t-body-m{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;}
.t-body-m-strong{font-family:var(--font-body);font-weight:600;font-size:16px;line-height:24px;letter-spacing:0px;}
.t-body-s{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;}
.t-body-s-strong{font-family:var(--font-body);font-weight:600;font-size:14px;line-height:20px;letter-spacing:0px;}
.t-label-l{font-family:var(--font-body);font-weight:500;font-size:14px;line-height:20px;letter-spacing:0.1px;}
.t-label-m{font-family:var(--font-body);font-weight:500;font-size:12px;line-height:16px;letter-spacing:0.3px;}
.t-label-caps{font-family:var(--font-body);font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.2px;}
.t-caption{font-family:var(--font-body);font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;}
.t-numeral-door{font-family:var(--font-display);font-weight:300;font-size:120px;line-height:120px;letter-spacing:-4px;}
.t-numeral-l{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:36px;letter-spacing:-0.5px;}
.t-seal-kanji{font-family:var(--font-kanji);font-weight:700;font-size:48px;line-height:48px;letter-spacing:0px;}

/* Varjud (Yoru-toonis) */
:root{--shadow-soft:0 2px 8px rgba(43,31,62,.08);--shadow-card:0 8px 24px -4px rgba(43,31,62,.12),0 2px 6px rgba(43,31,62,.06);--shadow-float:0 16px 40px -8px rgba(43,31,62,.22);}
