/* KAGEKIRI Design System – generated by tools/build_tokens.py from tokens.json. Do not edit by hand. */
:root {
  --kg-ink-0: #FFFFFF;
  --kg-ink-25: #FAFBFC;
  --kg-ink-50: #F4F6F8;
  --kg-ink-100: #EBEFF2;
  --kg-ink-150: #E1E6EA;
  --kg-ink-200: #D3DAE0;
  --kg-ink-300: #B7C1C9;
  --kg-ink-400: #8E9AA5;
  --kg-ink-500: #66727D;
  --kg-ink-600: #4D5862;
  --kg-ink-700: #343C46;
  --kg-ink-750: #283039;
  --kg-ink-800: #1F262E;
  --kg-ink-850: #181E25;
  --kg-ink-900: #12171D;
  --kg-ink-925: #0E1217;
  --kg-ink-950: #0A0D11;
  --kg-ink-1000: #06080B;
  --kg-teal-50: #EAF7F7;
  --kg-teal-100: #CDEFEF;
  --kg-teal-200: #9FDFE0;
  --kg-teal-300: #6CCACD;
  --kg-teal-400: #3FB2B7;
  --kg-teal-500: #23979D;
  --kg-teal-600: #1B7C82;
  --kg-teal-700: #17646A;
  --kg-teal-800: #155056;
  --kg-teal-900: #123F44;
  --kg-navy-50: #EEF2F7;
  --kg-navy-100: #D9E1EC;
  --kg-navy-200: #B3C2D6;
  --kg-navy-300: #8EA3BF;
  --kg-navy-400: #5F7898;
  --kg-navy-500: #3E5675;
  --kg-navy-600: #2D425E;
  --kg-navy-700: #22334A;
  --kg-navy-800: #1A2639;
  --kg-navy-900: #121B29;
  --kg-steel-100: #EEF2F4;
  --kg-steel-200: #DCE3E7;
  --kg-steel-300: #C3CDD3;
  --kg-steel-400: #9EABB3;
  --kg-red-300: #FDA4A4;
  --kg-red-400: #F87171;
  --kg-red-500: #E5484D;
  --kg-red-600: #CE2C31;
  --kg-red-700: #A9252A;
  --kg-green-300: #86EFAC;
  --kg-green-400: #4ADE80;
  --kg-green-500: #22C55E;
  --kg-green-600: #16A34A;
  --kg-green-700: #15803D;
  --kg-amber-300: #FCD34D;
  --kg-amber-400: #FBBF24;
  --kg-amber-500: #F59E0B;
  --kg-amber-600: #D97706;
  --kg-amber-700: #B45309;
  --kg-blue-300: #93C5FD;
  --kg-blue-400: #60A5FA;
  --kg-blue-500: #3B82F6;
  --kg-blue-600: #2563EB;
  --kg-blue-700: #1D4ED8;
  --kg-gradient-brand: linear-gradient(100deg, #17646A 0%, #3FB2B7 55%, #C3CDD3 100%);
  --kg-gradient-action: linear-gradient(180deg, #1B7C82 0%, #17646A 100%);
  --kg-gradient-hype: linear-gradient(120deg, #17646A 0%, #1B7C82 50%, #2D425E 100%);
  --kg-font-display: Sora, "Segoe UI", system-ui, sans-serif;
  --kg-font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --kg-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --kg-font-jp: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --kg-weight-light: 300;
  --kg-weight-regular: 400;
  --kg-weight-medium: 500;
  --kg-weight-semibold: 600;
  --kg-weight-bold: 700;
  --kg-text-display-size: 44px;
  --kg-text-display-leading: 1.05;
  --kg-text-display-tracking: -0.02em;
  --kg-text-display-weight: 700;
  --kg-text-h1-size: 32px;
  --kg-text-h1-leading: 1.15;
  --kg-text-h1-tracking: -0.015em;
  --kg-text-h1-weight: 700;
  --kg-text-h2-size: 22px;
  --kg-text-h2-leading: 1.25;
  --kg-text-h2-tracking: -0.01em;
  --kg-text-h2-weight: 650;
  --kg-text-h3-size: 16px;
  --kg-text-h3-leading: 1.35;
  --kg-text-h3-tracking: 0;
  --kg-text-h3-weight: 600;
  --kg-text-h4-size: 13px;
  --kg-text-h4-leading: 1.4;
  --kg-text-h4-tracking: 0.04em;
  --kg-text-h4-weight: 600;
  --kg-text-h5-size: 12px;
  --kg-text-h5-leading: 1.4;
  --kg-text-h5-tracking: 0.06em;
  --kg-text-h5-weight: 600;
  --kg-text-h6-size: 11px;
  --kg-text-h6-leading: 1.4;
  --kg-text-h6-tracking: 0.08em;
  --kg-text-h6-weight: 600;
  --kg-text-body-lg-size: 16px;
  --kg-text-body-lg-leading: 1.55;
  --kg-text-body-lg-tracking: 0;
  --kg-text-body-lg-weight: 400;
  --kg-text-body-size: 14px;
  --kg-text-body-leading: 1.5;
  --kg-text-body-tracking: 0;
  --kg-text-body-weight: 400;
  --kg-text-body-sm-size: 13px;
  --kg-text-body-sm-leading: 1.45;
  --kg-text-body-sm-tracking: 0;
  --kg-text-body-sm-weight: 400;
  --kg-text-caption-size: 12px;
  --kg-text-caption-leading: 1.4;
  --kg-text-caption-tracking: 0.01em;
  --kg-text-caption-weight: 500;
  --kg-text-label-size: 11px;
  --kg-text-label-leading: 1.35;
  --kg-text-label-tracking: 0.1em;
  --kg-text-label-weight: 600;
  --kg-text-mono-size: 12px;
  --kg-text-mono-leading: 1.4;
  --kg-text-mono-tracking: 0;
  --kg-text-mono-weight: 400;
  --kg-space-0: 0px;
  --kg-space-px: 1px;
  --kg-space-0-5: 2px;
  --kg-space-1: 4px;
  --kg-space-1-5: 6px;
  --kg-space-2: 8px;
  --kg-space-2-5: 10px;
  --kg-space-3: 12px;
  --kg-space-4: 16px;
  --kg-space-5: 20px;
  --kg-space-6: 24px;
  --kg-space-7: 28px;
  --kg-space-8: 32px;
  --kg-space-10: 40px;
  --kg-space-12: 48px;
  --kg-space-16: 64px;
  --kg-space-20: 80px;
  --kg-radius-none: 0;
  --kg-radius-xs: 4px;
  --kg-radius-sm: 6px;
  --kg-radius-md: 8px;
  --kg-radius-lg: 10px;
  --kg-radius-xl: 14px;
  --kg-radius-2xl: 18px;
  --kg-radius-pill: 999px;
  --kg-cut-xs: 0px;
  --kg-cut-sm: 0px;
  --kg-cut-md: 0px;
  --kg-cut-lg: 0px;
  --kg-cut-xl: 0px;
  --kg-size-control-xs: 26px;
  --kg-size-control-sm: 30px;
  --kg-size-control-md: 36px;
  --kg-size-control-lg: 44px;
  --kg-size-control-xl: 58px;
  --kg-size-touch-min: 44px;
  --kg-size-sidebar: 232px;
  --kg-size-topbar: 54px;
  --kg-size-panel: 330px;
  --kg-size-content-max: 1400px;
  --kg-size-measure: 68ch;
  --kg-shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --kg-shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --kg-shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --kg-shadow-xl: 0 30px 80px rgba(0,0,0,.6);
  --kg-z-base: 1;
  --kg-z-sticky: 10;
  --kg-z-dropdown: 100;
  --kg-z-modal: 1500;
  --kg-z-toast: 2000;
  --kg-z-overlay: 3000;
  --kg-z-splash: 10000;
  --kg-breakpoint-sm: 640px;
  --kg-breakpoint-md: 900px;
  --kg-breakpoint-lg: 1100px;
  --kg-breakpoint-xl: 1440px;
  --kg-duration-instant: 80ms;
  --kg-duration-fast: 150ms;
  --kg-duration-base: 220ms;
  --kg-duration-slow: 350ms;
  --kg-duration-slower: 550ms;
  --kg-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --kg-ease-snap: cubic-bezier(0.3, 1.4, 0.5, 1);
  /* dark theme = default */
  --kg-bg: #0A0D11;
  --kg-bg-sunken: #06080B;
  --kg-surface-1: #12171D;
  --kg-surface-2: #181E25;
  --kg-surface-3: #1F262E;
  --kg-field: #0E1217;
  --kg-border: #283039;
  --kg-border-strong: #343C46;
  --kg-text: #EEF2F4;
  --kg-text-muted: #A9B4BD;
  --kg-text-subtle: #8592A0;
  --kg-text-on-accent: #FFFFFF;
  --kg-accent: #3FB2B7;
  --kg-accent-hover: #6CCACD;
  --kg-accent-strong: #17646A;
  --kg-accent-text: #6CCACD;
  --kg-accent-2: #8EA3BF;
  --kg-accent-2-text: #B3C2D6;
  --kg-hype: #6CCACD;
  --kg-learn: #60A5FA;
  --kg-learn-text: #93C5FD;
  --kg-success: #22C55E;
  --kg-success-text: #4ADE80;
  --kg-warning: #F59E0B;
  --kg-warning-text: #FBBF24;
  --kg-danger: #E5484D;
  --kg-danger-text: #F87171;
  --kg-info: #60A5FA;
  --kg-info-text: #93C5FD;
  --kg-text-on-hype: #FFFFFF;
  --kg-accent-soft: color-mix(in srgb, #3FB2B7 14%, transparent);
  --kg-accent-2-soft: color-mix(in srgb, #E5484D 14%, transparent);
  --kg-success-soft: color-mix(in srgb, #22C55E 14%, transparent);
  --kg-warning-soft: color-mix(in srgb, #F59E0B 14%, transparent);
  --kg-info-soft: color-mix(in srgb, #60A5FA 12%, transparent);
  --kg-overlay-hover: rgba(255,255,255,.04);
  --kg-overlay-press: rgba(255,255,255,.08);
  --kg-scrim: rgba(4,6,9,.7);
  --kg-chrome: rgba(14,18,23,.9);
  --kg-glow: 0 6px 20px -8px rgba(63,178,183,.55);
  --kg-haze: radial-gradient(1000px 560px at 85% -15%, rgba(63,178,183,.06), transparent 60%);
  --kg-focus-ring: 0 0 0 2px #0A0D11, 0 0 0 4px #6CCACD;
  --kg-media-scrim: rgba(10,13,17,.75);
  --kg-media-text: #EEF2F4;
  --kg-media-stage: linear-gradient(135deg, #1f262e, #0e1217);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --kg-bg: #F4F6F8;
  --kg-bg-sunken: #EBEFF2;
  --kg-surface-1: #FFFFFF;
  --kg-surface-2: #FAFBFC;
  --kg-surface-3: #E1E6EA;
  --kg-field: #FFFFFF;
  --kg-border: #D3DAE0;
  --kg-border-strong: #B7C1C9;
  --kg-text: #121B29;
  --kg-text-muted: #4D5862;
  --kg-text-subtle: #66727D;
  --kg-text-on-accent: #FFFFFF;
  --kg-accent: #1B7C82;
  --kg-accent-hover: #17646A;
  --kg-accent-strong: #1B7C82;
  --kg-accent-text: #17646A;
  --kg-accent-2: #22334A;
  --kg-accent-2-text: #2D425E;
  --kg-hype: #1B7C82;
  --kg-learn: #2563EB;
  --kg-learn-text: #1D4ED8;
  --kg-success: #16A34A;
  --kg-success-text: #15803D;
  --kg-warning: #D97706;
  --kg-warning-text: #B45309;
  --kg-danger: #CE2C31;
  --kg-danger-text: #A9252A;
  --kg-info: #2563EB;
  --kg-info-text: #1D4ED8;
  --kg-text-on-hype: #FFFFFF;
  --kg-accent-soft: color-mix(in srgb, #1B7C82 10%, transparent);
  --kg-accent-2-soft: color-mix(in srgb, #CE2C31 9%, transparent);
  --kg-success-soft: color-mix(in srgb, #16A34A 10%, transparent);
  --kg-warning-soft: color-mix(in srgb, #D97706 11%, transparent);
  --kg-info-soft: color-mix(in srgb, #2563EB 9%, transparent);
  --kg-overlay-hover: rgba(18,27,41,.04);
  --kg-overlay-press: rgba(18,27,41,.08);
  --kg-scrim: rgba(18,27,41,.35);
  --kg-chrome: rgba(255,255,255,.9);
  --kg-glow: 0 6px 18px -8px rgba(27,124,130,.45);
  --kg-haze: radial-gradient(1000px 560px at 85% -15%, rgba(27,124,130,.05), transparent 60%);
  --kg-focus-ring: 0 0 0 2px #F4F6F8, 0 0 0 4px #1B7C82;
  --kg-media-scrim: rgba(10,13,17,.75);
  --kg-media-text: #EEF2F4;
  --kg-media-stage: linear-gradient(135deg, #1f262e, #0e1217);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --kg-bg: #F4F6F8;
    --kg-bg-sunken: #EBEFF2;
    --kg-surface-1: #FFFFFF;
    --kg-surface-2: #FAFBFC;
    --kg-surface-3: #E1E6EA;
    --kg-field: #FFFFFF;
    --kg-border: #D3DAE0;
    --kg-border-strong: #B7C1C9;
    --kg-text: #121B29;
    --kg-text-muted: #4D5862;
    --kg-text-subtle: #66727D;
    --kg-text-on-accent: #FFFFFF;
    --kg-accent: #1B7C82;
    --kg-accent-hover: #17646A;
    --kg-accent-strong: #1B7C82;
    --kg-accent-text: #17646A;
    --kg-accent-2: #22334A;
    --kg-accent-2-text: #2D425E;
    --kg-hype: #1B7C82;
    --kg-learn: #2563EB;
    --kg-learn-text: #1D4ED8;
    --kg-success: #16A34A;
    --kg-success-text: #15803D;
    --kg-warning: #D97706;
    --kg-warning-text: #B45309;
    --kg-danger: #CE2C31;
    --kg-danger-text: #A9252A;
    --kg-info: #2563EB;
    --kg-info-text: #1D4ED8;
    --kg-text-on-hype: #FFFFFF;
    --kg-accent-soft: color-mix(in srgb, #1B7C82 10%, transparent);
    --kg-accent-2-soft: color-mix(in srgb, #CE2C31 9%, transparent);
    --kg-success-soft: color-mix(in srgb, #16A34A 10%, transparent);
    --kg-warning-soft: color-mix(in srgb, #D97706 11%, transparent);
    --kg-info-soft: color-mix(in srgb, #2563EB 9%, transparent);
    --kg-overlay-hover: rgba(18,27,41,.04);
    --kg-overlay-press: rgba(18,27,41,.08);
    --kg-scrim: rgba(18,27,41,.35);
    --kg-chrome: rgba(255,255,255,.9);
    --kg-glow: 0 6px 18px -8px rgba(27,124,130,.45);
    --kg-haze: radial-gradient(1000px 560px at 85% -15%, rgba(27,124,130,.05), transparent 60%);
    --kg-focus-ring: 0 0 0 2px #F4F6F8, 0 0 0 4px #1B7C82;
    --kg-media-scrim: rgba(10,13,17,.75);
    --kg-media-text: #EEF2F4;
    --kg-media-stage: linear-gradient(135deg, #1f262e, #0e1217);
    color-scheme: light;
  }
}