/* Shared design tokens. See docs/UI_FOUNDATIONS.md and docs/UI_DESIGN_SYSTEM.md. */
:root {
  --fenix-primary-50: #f0ebf8;
  --fenix-primary-100: #ddb9ff;
  --fenix-primary-200: #b899e0;
  --fenix-primary-300: #9466d0;
  --fenix-primary-400: #7540bf;
  --fenix-primary-500: #5e2d9e;
  --fenix-primary-600: #4a2280;
  --fenix-primary-700: #391a63;
  --fenix-primary-800: #291364;
  --fenix-primary-900: #1a0c40;
  --fenix-accent-50: #fff0fb;
  --fenix-accent-100: #ffdaf5;
  --fenix-accent-200: #feb8ec;
  --fenix-accent-300: #fc85e3;
  --fenix-accent-400: #fa5cd8;
  --fenix-accent-500: #f540ce;
  --fenix-accent-600: #d131b0;
  --fenix-accent-700: #ad2492;
  --fenix-accent-800: #891a74;
  --fenix-accent-900: #651256;
  --fenix-success-50: #ecfdf5;
  --fenix-success-100: #d1fae5;
  --fenix-success-200: #a7f3d0;
  --fenix-success-300: #6ee7b7;
  --fenix-success-400: #34d399;
  --fenix-success-500: #10b981;
  --fenix-success-600: #059669;
  --fenix-success-700: #047857;
  --fenix-success-800: #065f46;
  --fenix-success-900: #064e3b;
  --fenix-warning-50: #fffbeb;
  --fenix-warning-100: #fef3c7;
  --fenix-warning-200: #fde68a;
  --fenix-warning-300: #fcd34d;
  --fenix-warning-400: #fbbf24;
  --fenix-warning-500: #f59e0b;
  --fenix-warning-600: #d97706;
  --fenix-warning-700: #b45309;
  --fenix-warning-800: #92400e;
  --fenix-warning-900: #78350f;
  --fenix-danger-50: #fef2f2;
  --fenix-danger-100: #fee2e2;
  --fenix-danger-200: #fecaca;
  --fenix-danger-300: #fca5a5;
  --fenix-danger-400: #f87171;
  --fenix-danger-500: #ef4444;
  --fenix-danger-600: #dc2626;
  --fenix-danger-700: #b91c1c;
  --fenix-danger-800: #991b1b;
  --fenix-danger-900: #7f1d1d;
  --fenix-info-50: #eff6ff;
  --fenix-info-100: #dbeafe;
  --fenix-info-200: #bfdbfe;
  --fenix-info-300: #93c5fd;
  --fenix-info-400: #60a5fa;
  --fenix-info-500: #3b82f6;
  --fenix-info-600: #2563eb;
  --fenix-info-700: #1d4ed8;
  --fenix-info-800: #1e40af;
  --fenix-info-900: #1e3a8a;
  --fenix-neutral-50: #f9fafb;
  --fenix-neutral-100: #f4f4f6;
  --fenix-neutral-200: #e5e5eb;
  --fenix-neutral-300: #d1d1db;
  --fenix-neutral-400: #9c9caf;
  --fenix-neutral-500: #6b6b80;
  --fenix-neutral-600: #4f4f63;
  --fenix-neutral-700: #3d3d50;
  --fenix-neutral-800: #27273a;
  --fenix-neutral-900: #030537;
  --fenix-white: #ffffff;
  --fenix-flag-background: #f0f0f0;
  --fenix-color-ink: var(--fenix-neutral-900);
  --fenix-color-muted: var(--fenix-neutral-600);
  --fenix-color-line: var(--fenix-neutral-200);
  --fenix-color-surface: var(--fenix-white);
  --fenix-color-soft: var(--fenix-neutral-100);
  --fenix-color-primary: var(--fenix-primary-500);
  --fenix-color-primary-dark: var(--fenix-primary-800);
  --fenix-color-accent: var(--fenix-accent-300);
  --fenix-color-navy: var(--fenix-neutral-900);
  --fenix-navy: var(--fenix-neutral-900);
  --fenix-purple: var(--fenix-primary-800);
  --fenix-soft: var(--fenix-primary-50);
  --fenix-muted: var(--fenix-neutral-600);
  --fenix-line: var(--fenix-neutral-200);
  --fenix-grid-columns: 4;
  --fenix-grid-gutter: 16px;
  --fenix-grid-margin: 16px;
  --fenix-grid-content-inset: 8px;
  --fenix-grid-container-width: min(1280px, calc(100vw - 2 * var(--fenix-grid-margin)));
  --fenix-grid-content-width: min(1200px, calc(var(--fenix-grid-container-width) - 2 * var(--fenix-grid-content-inset)));
  --fenix-section-spacing: 64px;
  --fenix-section-spacing-large: 80px;
  --fenix-shell: var(--fenix-grid-content-width);
  --fenix-container: var(--fenix-grid-container-width);
  --fenix-page-gap: var(--fenix-section-spacing);
  --fenix-button-height: 44px;
  --fenix-header-block-size: 100px;
  --fenix-button-radius: 12px;
  --fenix-button-padding: 16px;
  --fenix-button-large-height: 52px;
  --fenix-button-large-radius: 16px;
  --fenix-button-large-padding: 24px;
  --fenix-tag-success-hover-text: #ebffee;
  --fenix-control-gap: 8px;
  --fenix-focus-ring: var(--fenix-primary-100);
  --fenix-font-en: "Heebo", sans-serif;
  --fenix-font-ja: "Noto Sans JP", sans-serif;
  --fenix-font-vi: "Lexend", sans-serif;
  --fenix-font: var(--fenix-font-en);
  --fenix-weight-regular: 400;
  --fenix-weight-medium: 500;
  --fenix-weight-semibold: 600;
  --fenix-weight-bold: 700;
  --fenix-weight-extrabold: 800;
  --fenix-letter-spacing: 0;
  --fenix-text-display-size: 72px;
  --fenix-text-display-line-height: 80px;
  --fenix-text-display-weight: 800;
  --fenix-text-h1-size: 56px;
  --fenix-text-h1-line-height: 64px;
  --fenix-text-h1-weight: 700;
  --fenix-text-h2-size: 48px;
  --fenix-text-h2-line-height: 56px;
  --fenix-text-h2-weight: 700;
  --fenix-text-h3-size: 36px;
  --fenix-text-h3-line-height: 44px;
  --fenix-text-h3-weight: 700;
  --fenix-text-h4-size: 28px;
  --fenix-text-h4-line-height: 36px;
  --fenix-text-h4-weight: 600;
  --fenix-text-h5-size: 24px;
  --fenix-text-h5-line-height: 32px;
  --fenix-text-h5-weight: 600;
  --fenix-text-h6-size: 20px;
  --fenix-text-h6-line-height: 28px;
  --fenix-text-h6-weight: 600;
  --fenix-text-subtitle-size: 20px;
  --fenix-text-subtitle-line-height: 28px;
  --fenix-text-subtitle-weight: 500;
  --fenix-text-body-large-size: 18px;
  --fenix-text-body-large-line-height: 28px;
  --fenix-text-body-large-weight: 400;
  --fenix-text-body-size: 16px;
  --fenix-text-body-line-height: 24px;
  --fenix-text-body-weight: 400;
  --fenix-text-body-small-size: 14px;
  --fenix-text-body-small-line-height: 20px;
  --fenix-text-body-small-weight: 400;
  --fenix-text-caption-size: 12px;
  --fenix-text-caption-line-height: 16px;
  --fenix-text-caption-weight: 400;
  --fenix-text-label-size: 14px;
  --fenix-text-label-line-height: 20px;
  --fenix-text-label-weight: 500;
  --fenix-text-button-size: 16px;
  --fenix-text-button-line-height: 24px;
  --fenix-text-button-weight: 600;
  --fenix-text-overline-size: 12px;
  --fenix-text-overline-line-height: 16px;
  --fenix-text-overline-weight: 700;
  --fenix-input-height: 56px;
  --fenix-input-radius: 12px;
  --fenix-input-padding-inline: 20px;
  --fenix-input-border: var(--fenix-neutral-400);
  --fenix-input-focus: var(--fenix-primary-300);
  --fenix-input-background: var(--fenix-white);
  --fenix-input-text: var(--fenix-neutral-900);
  --fenix-input-placeholder: var(--fenix-neutral-400);
  --fenix-input-icon: var(--fenix-neutral-600);
  --fenix-input-error: var(--fenix-danger-600);
  --fenix-textarea-height: 168px;
}

@media (min-width: 768px) {
  :root {
    --fenix-grid-columns: 8;
    --fenix-grid-gutter: 24px;
    --fenix-grid-margin: 24px;
    --fenix-grid-content-inset: 24px;
    --fenix-section-spacing: 80px;
    --fenix-section-spacing-large: 96px;
  }
}

@media (min-width: 1440px) {
  :root {
    --fenix-grid-columns: 12;
    --fenix-grid-gutter: 32px;
    --fenix-grid-margin: 80px;
    --fenix-grid-content-inset: 40px;
    --fenix-section-spacing: 172px;
    --fenix-section-spacing-large: 172px;
  }
}

:where([lang]):lang(en) { --fenix-font: var(--fenix-font-en); }
:where([lang]):lang(ja) { --fenix-font: var(--fenix-font-ja); }
:where([lang]):lang(vi) { --fenix-font: var(--fenix-font-vi); }
:where([lang]) { font-family: var(--fenix-font); }

body {
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-body-size);
  font-weight: var(--fenix-text-body-weight);
  line-height: var(--fenix-text-body-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

button, input, select, textarea { font-family: var(--fenix-font); }

.fenix-type-display {
  --fenix-type-line-height: var(--fenix-text-display-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-display-size);
  font-weight: var(--fenix-text-display-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

h1,
.fenix-type-h1 {
  --fenix-type-line-height: var(--fenix-text-h1-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-h1-size);
  font-weight: var(--fenix-text-h1-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

h2,
.fenix-type-h2 {
  --fenix-type-line-height: var(--fenix-text-h2-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-h2-size);
  font-weight: var(--fenix-text-h2-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

h3,
.fenix-type-h3 {
  --fenix-type-line-height: var(--fenix-text-h3-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-h3-size);
  font-weight: var(--fenix-text-h3-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

h4,
.fenix-type-h4 {
  --fenix-type-line-height: var(--fenix-text-h4-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-h4-size);
  font-weight: var(--fenix-text-h4-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

h5,
.fenix-type-h5 {
  --fenix-type-line-height: var(--fenix-text-h5-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-h5-size);
  font-weight: var(--fenix-text-h5-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

h6,
.fenix-type-h6 {
  --fenix-type-line-height: var(--fenix-text-h6-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-h6-size);
  font-weight: var(--fenix-text-h6-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

.fenix-type-subtitle {
  --fenix-type-line-height: var(--fenix-text-subtitle-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-subtitle-size);
  font-weight: var(--fenix-text-subtitle-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

.fenix-type-body-large {
  --fenix-type-line-height: var(--fenix-text-body-large-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-body-large-size);
  font-weight: var(--fenix-text-body-large-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

p,
.fenix-type-body {
  --fenix-type-line-height: var(--fenix-text-body-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-body-size);
  font-weight: var(--fenix-text-body-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

.fenix-type-body-small {
  --fenix-type-line-height: var(--fenix-text-body-small-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-body-small-size);
  font-weight: var(--fenix-text-body-small-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

figcaption,
.fenix-type-caption {
  --fenix-type-line-height: var(--fenix-text-caption-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-caption-size);
  font-weight: var(--fenix-text-caption-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

label,
.fenix-type-label {
  --fenix-type-line-height: var(--fenix-text-label-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-label-size);
  font-weight: var(--fenix-text-label-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

.fenix-type-button {
  --fenix-type-line-height: var(--fenix-text-button-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-button-size);
  font-weight: var(--fenix-text-button-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}

.fenix-type-overline {
  --fenix-type-line-height: var(--fenix-text-overline-line-height);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-overline-size);
  font-weight: var(--fenix-text-overline-weight);
  line-height: var(--fenix-type-line-height);
  letter-spacing: var(--fenix-letter-spacing);
}