:root {

  --background: 60 33% 99%;
  --foreground: 48 8% 13%;
  --card: 60 33% 99%;
  --card-foreground: 48 8% 13%;
  --popover: 60 33% 99%;
  --popover-foreground: 48 8% 13%;

  --primary: 268.7 100% 50%;
  --primary-foreground: 60 33% 99%;
  --secondary: 45 15% 95%;
  --secondary-foreground: 48 8% 13%;
  --muted: 45 15% 95%;

  --muted-foreground: 44 5% 39%;
  --accent: 40 13% 91%;
  --accent-foreground: 48 8% 13%;
  --destructive: 357 64% 44%;
  --destructive-foreground: 60 33% 99%;

  --border: 30 7% 93%;

  --input: 30 7% 53%;

  --success: 146 40% 58%;
  --success-foreground: 48 8% 13%;
  --warning: 44 100% 49%;
  --warning-foreground: 48 8% 13%;
  --info: 221 40% 50%;
  --info-foreground: 60 33% 99%;
  --attention: 25 99% 46%;
  --attention-foreground: 48 8% 13%;

  --brand: 268.7 100% 50%;
  --brand-foreground: 60 33% 99%;

  --text-tertiary: 44 5% 55%;
  --text-disabled: 40 6% 68%;

  --text-success: 152 84% 22%;
  --text-warning: 36 100% 28%;
  --text-info: 221 70% 38%;
  --text-error: 357 75% 38%;

  --mark-primary: initial;
  --mark-success: initial;
  --mark-warning: initial;
  --mark-info: initial;
  --mark-destructive: initial;
  --mark-attention: initial;

  --secondary-hover: 45 15% 91%;
  --secondary-active: 45 15% 88%;

  --wa-ai: #165e83;
  --wa-gunjo: #4c6cb3;
  --wa-ruri: #1e50a2;
  --wa-kon: #223a70;
  --wa-wakatake: #68be8d;
  --wa-moegi: #006e54;
  --wa-yamabuki: #f8b500;
  --wa-shu: #eb6101;
  --wa-akane: #b7282e;
  --wa-enji: #b94047;
  --wa-sakura: #fef4f4;
  --wa-sumi: #595857;
  --wa-nezu: #949495;

  --chart-1: #0077c7;
  --chart-2: #006e54;
  --chart-3: #f8b500;
  --chart-4: #b7282e;
  --chart-5: #4c6cb3;
  --chart-6: #eb6101;

  --disabled-opacity: 0.5;

  --radius: calc(0.375rem * var(--scaling));
  --radius-ratio: 1.618;
  --radius-pill: 9999px;
  --radius-sharp: 0;

  --shadow-color: 0 0 0;
  --shadow-xs: 0 1px 1px 0 rgb(var(--shadow-color) / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
  --shadow-md:
    0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 8px 10px -6px rgb(var(--shadow-color) / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);

  --shadow-glow: 0 0 0 0 transparent;

  --brand-glow-color: initial;
  --brand-glow-alpha: 0.18;
  --brand-glow-size: 60% 50%;
  --brand-glow-position: 50% 0%;
  --brand-glow: initial;

  --focus-outline: 1;
  --focus-outline-weight: var(--stroke-hairline);

  --focus-outline-color: initial;

  --control-outline-width: calc(var(--stroke-md) * var(--focus-outline));
  --focus-outline-offset: 0px;

  --focus-ring-color: initial;

  --focus-ring-weight: var(--focus-outline-weight);
  --focus-ring-width: calc(var(--focus-ring-weight) * var(--focus-outline));

  --focus-ring-opacity: 1;

  --focus-ring-glow-width: var(--control-outline-width);

  --focus-ring-glow-color: initial;
  --focus-ring-glow-alpha: var(--control-outline-alpha);

  --focus-field-shadow: initial;

  --focus-ring-offset: var(--focus-outline-offset);

  --focus-ring-clip-margin: 8px;

  --region-focus-ring-width: 0;
  --region-focus-ring-color: initial;

  --gradient-brand: none;
  --gradient-hero: none;
  --gradient-glow: none;

  --font-sans-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
    sans-serif;
  --font-family-sans: var(--font-sans-base);
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-family-display: var(--font-family-sans);
  --font-family-body: var(--font-family-sans);

  --font-size-base: 0.875rem;
  --font-size-ratio: 1.1227;

  --font-size-2xs: initial;
  --font-size-xs: initial;
  --font-size-sm: initial;
  --font-size-lg: initial;
  --font-size-xl: initial;
  --font-size-2xl: initial;

  --font-size-display: clamp(2rem, 1.5rem + 2.5vw, 3.375rem);
  --font-size-display-ratio: 1.28;

  --font-size-3xl: initial;
  --font-size-4xl: initial;
  --font-size-5xl: initial;

  --heading-h1: initial;
  --heading-h2: initial;
  --heading-h3: initial;
  --heading-h4: initial;

  --heading-h5: initial;

  --font-weight-normal: 400;
  --font-weight-medium: 500;

  --font-weight-semibold: 500;
  --font-weight-bold: 700;

  --font-weight-black: 800;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-body: 1.7;
  --letter-spacing-tight: 0;

  --scaling: 1;

  --touch-target-min: 1.5rem;

  --space-0: 0;
  --space-1: calc(0.25rem * var(--scaling));
  --space-2: calc(0.5rem * var(--scaling));
  --space-3: calc(0.75rem * var(--scaling));
  --space-4: calc(1rem * var(--scaling));
  --space-5: calc(1.25rem * var(--scaling));
  --space-6: calc(1.5rem * var(--scaling));
  --space-8: calc(2rem * var(--scaling));
  --space-10: calc(2.5rem * var(--scaling));
  --space-12: calc(3rem * var(--scaling));

  --space-20: calc(5rem * var(--scaling));
  --space-24: calc(6rem * var(--scaling));

  --icon-size-2xs: 0.625rem;
  --icon-size-xs: 0.75rem;
  --icon-size-sm: 0.875rem;
  --icon-size-md: 1rem;
  --icon-size-lg: 1.25rem;
  --icon-size-xl: 1.5rem;
  --icon-size-2xl: 2.25rem;
  --icon-size-3xl: 2.5rem;
  --icon-size-4xl: 3rem;

  --stroke-hairline: 1px;
  --stroke-sm: 1.5px;
  --stroke-md: 2px;
  --stroke-lg: 3px;
  --stroke-xl: 4px;
  --stroke-2xl: 6px;

  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;

  --band-height-xs: 1.5rem;
  --band-height-sm: 1.75rem;
  --band-height-md: 2rem;
  --band-height-lg: 2.25rem;
  --band-height-xl: 2.75rem;
  --band-height-2xl: 3rem;
  --band-height-3xl: 3.5rem;

  --ratio-phi: 1.6180339887;
  --phi-unit: var(--space-4);
  --phi-n2: calc(var(--phi-unit) / var(--ratio-phi) / var(--ratio-phi));
  --phi-n1: calc(var(--phi-unit) / var(--ratio-phi));
  --phi-0: var(--phi-unit);
  --phi-p1: calc(var(--phi-unit) * var(--ratio-phi));
  --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --reveal-distance: 10px;

  --reveal-stagger-step: 60ms;

  --duration-loop: 1400ms;

  --activity-interval: var(--duration-loop);

  --activity-stagger-step: 160ms;

  --marquee-interval: 20s;
  --marquee-interval-slow: calc(var(--marquee-interval) * 2);
  --marquee-interval-fast: calc(var(--marquee-interval) / 2);
}

.ui-scale-fixed {
  --scaling: 1;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius: 0.375rem;
  --control-height: var(--control-height-default);

  --control-height-sm: var(--band-height-sm);
  --control-height-lg: var(--band-height-lg);
  --control-height-xs: var(--band-height-xs);
  --control-icon-size: var(--icon-size-md);
  --control-icon-size-sm: var(--icon-size-sm);
  --control-padding-x: var(--space-3);
  --control-gap: var(--space-2);
  --control-gap-sm: var(--space-1);
  --checkbox-size: 1rem;
  --switch-width: 2.25rem;
  --switch-height: 1.25rem;
  --switch-thumb-size: 1rem;
  --switch-thumb-translate: 1rem;
  --table-row-height: var(--table-row-height-default);
  --table-cell-padding-y: var(--space-2);
  --phi-unit: var(--space-4);
  --space-page-x: var(--space-6);
  --space-page-y: var(--space-6);
  --space-section: var(--space-4);
  --space-section-band: var(--space-20);
  --space-section-hero: var(--space-24);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-6);
  --space-stack-xl: var(--space-10);
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-3);
  --space-inline-lg: var(--space-4);

  --space-inline-xl: var(--space-6);
  --space-chrome-x: var(--space-6);
  --space-chrome-y: var(--space-4);
  --space-chrome-gap: var(--space-2);
  --field-label-gap: var(--space-2);
}

.dark,
:root[data-theme="dark"] {

  --background: 48 9% 9%;
  --foreground: 60 20% 96%;
  --card: 48 8% 12%;
  --card-foreground: 60 20% 96%;
  --popover: 48 8% 12%;
  --popover-foreground: 60 20% 96%;
  --primary: 268.7 100% 86.9%;
  --primary-foreground: 48 9% 9%;
  --secondary: 45 6% 18%;
  --secondary-foreground: 60 20% 96%;
  --muted: 45 6% 18%;
  --muted-foreground: 44 6% 64%;
  --accent: 45 7% 22%;
  --accent-foreground: 60 20% 96%;

  --destructive: 357 55% 48%;
  --destructive-foreground: 0 0% 100%;

  --border: 45 6% 19%;

  --input: 45 6% 47%;

  --success: 146 45% 55%;
  --success-foreground: 48 9% 9%;
  --warning: 44 95% 55%;
  --warning-foreground: 48 9% 9%;
  --info: 221 55% 62%;
  --info-foreground: 48 9% 9%;
  --attention: 25 95% 56%;
  --attention-foreground: 48 9% 9%;

  --brand: 268.7 100% 86.9%;
  --brand-foreground: 48 9% 9%;

  --text-tertiary: 44 6% 56%;
  --text-disabled: 45 6% 40%;

  --text-success: 146 55% 64%;
  --text-warning: 44 95% 62%;
  --text-info: 221 70% 72%;
  --text-error: 357 75% 68%;

  --secondary-hover: 45 6% 22%;
  --secondary-active: 45 6% 26%;
}