:root {

  --c-brand-50: #ebecf2;
  --c-brand-100: #cacfe3;
  --c-brand-300: #50587d;
  --c-brand-900: #131936;
  --c-brand-white: #ffffff;

  --c-gray-50: #f6f7fb;
  --c-gray-100: #f1f5f9;
  --c-gray-300: #cbd5e1;
  --c-gray-500: #697086;
  --c-gray-700: #334155;
  --c-gray-900: #0f172a;

  --c-blue-50: #eaf0ff;
  --c-blue-100: #c2d3ff;
  --c-blue-500: #005efe;
  --c-blue-700: #1b43cc;
  --c-blue-900: #143196;

  --c-accent-lime: #61ff48;
  --c-accent-magenta: #f879ff;
  --c-accent-magenta-light: #f870ff;
  --c-accent-blue: #2149ff;
  --c-accent-yellow: #ffff71;

  --c-accent-magenta-tint: #fff0fd;
  --c-accent-green-tint: #f3fff0;
  --c-accent-blue-tint: #eaf0ff;

  --c-error-500: #ef4444;
  --c-success-500: #22c55e;

  --c-bg-base: var(--c-brand-white);
  --c-bg-subtle: var(--c-gray-50);
  --c-bg-brand: var(--c-blue-500);

  --c-text-default: var(--c-brand-900);
  --c-text-secondary: var(--c-brand-300);
  --c-text-muted: var(--c-gray-500);
  --c-text-inverse: var(--c-brand-white);

  --c-text-brand: var(--c-blue-500);
  --c-border-default: var(--c-gray-100);
  --c-action-default: var(--c-blue-500);
  --c-action-hover: var(--c-blue-700);
  --c-action-disabled: var(--c-gray-300);
  --c-status-error: var(--c-error-500);
  --c-status-success: var(--c-success-500);

  --bg-course-overview: var(--c-gray-50);
  --bg-school-info: var(--c-gray-100);
  --bg-reasons: #fffaeb;
  --bg-course-section-blue: var(--c-accent-blue);
  --bg-course-section-magenta: var(--c-accent-magenta-light);
  --bg-course-section-green: var(--c-success-500);

  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-90: 90px;
  --space-96: 96px;
  --space-112: 112px;
  --space-120: 120px;
  --space-160: 160px;
  --space-224: 224px;

  --pad-x: var(--space-90);
  --pad-x-sp: 24px;
  --section-y: var(--space-120);
  --section-y-sp: 64px;
  --content-gap: var(--space-112);
  --card-gap: var(--space-40);
  --w-container: 1260px;
  --hero-height: 544px;
  --hero-height-sp: 300px;
  --hero-pad-y: var(--space-224);
  --breadcrumb-height: 160px;
  --header-h: 70px;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-5: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-32: 32px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.1);

  --shadow-card: 0 4px 12px -2px rgba(15, 23, 42, 0.12);
  --shadow-floating: 0 12px 32px -4px rgba(15, 23, 42, 0.16);

  --font-en: "Inter", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-base: "Inter", "Noto Sans JP", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-hero: 56px;      --lh-hero: 1.35;
  --fs-h1: 44px;        --lh-h1: 1.4;
  --fs-h2: 34px;        --lh-h2: 1.45;
  --fs-h3: 26px;        --lh-h3: 1.4;
  --fs-lead: 20px;      --lh-lead: 1.6;
  --fs-body: 16px;      --lh-body: 1.74;
  --fs-body-sm: 14px;   --lh-body-sm: 1.4;
  --fs-caption: 12px;   --lh-caption: 1.7;
  --fs-button: 16px;    --lh-button: 1.5;

  --fs-hero-sp: 34px;      --lh-hero-sp: 1.45;
  --fs-h1-sp: 30px;        --lh-h1-sp: 1.45;
  --fs-h2-sp: 25px;        --lh-h2-sp: 1.5;
  --fs-h3-sp: 21px;        --lh-h3-sp: 1.55;
  --fs-lead-sp: 17px;      --lh-lead-sp: 1.8;
  --fs-body-sp: 14px;      --lh-body-sp: 1.65;
  --fs-body-sm-sp: 12px;   --lh-body-sm-sp: 1.75;
  --fs-caption-sp: 12px;   --lh-caption-sp: 1.7;
  --fs-button-sp: 15px;    --lh-button-sp: 1.5;

  --fs-decor-giant: 306px;
  --fs-decor-xl: 92px;
  --fs-decor-lg: 70px;
  --fs-decor-md: 64px;
  --fs-decor-price: 58px;
  --fs-decor-number: 48px;
  --fs-decor-brand: 42px;
  --fs-decor-slogan: 24px;
  --fs-decor-label: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg-base: var(--c-gray-900);
    --c-bg-subtle: var(--c-gray-700);
    --c-bg-brand: var(--c-blue-500);

    --c-text-default: var(--c-gray-50);
    --c-text-secondary: var(--c-gray-300);
    --c-text-muted: var(--c-gray-300);
    --c-text-inverse: var(--c-gray-900);
    --c-text-brand: var(--c-blue-100);

    --c-border-default: var(--c-gray-700);
    --c-action-default: var(--c-blue-500);
    --c-action-hover: var(--c-blue-100);
    --c-action-disabled: var(--c-gray-700);

    --c-status-error: var(--c-error-500);
    --c-status-success: var(--c-success-500);
  }
}

:root[data-theme="dark"] {
  --c-bg-base: var(--c-gray-900);
  --c-bg-subtle: var(--c-gray-700);
  --c-bg-brand: var(--c-blue-500);

  --c-text-default: var(--c-gray-50);
  --c-text-secondary: var(--c-gray-300);
  --c-text-muted: var(--c-gray-300);
  --c-text-inverse: var(--c-gray-900);
  --c-text-brand: var(--c-blue-100);

  --c-border-default: var(--c-gray-700);
  --c-action-default: var(--c-blue-500);
  --c-action-hover: var(--c-blue-100);
  --c-action-disabled: var(--c-gray-700);

  --c-status-error: var(--c-error-500);
  --c-status-success: var(--c-success-500);
}