@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("../fonts/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("../fonts/LibreBaskerville-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/RobotoMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/RobotoMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --yc-primary-50: #eaf6ff;
  --yc-primary-100: #d5ecff;
  --yc-primary-200: #b0dbff;
  --yc-primary-300: #84c8ff;
  --yc-primary-400: #57b3f2;
  --yc-primary-500: #2e98de;
  --yc-primary-600: #0b76c5;
  --yc-primary-700: #085ea0;
  --yc-primary-800: #0a3f73;
  --yc-primary-900: #082a4c;

  --yc-gray-50: #fafafa;
  --yc-gray-100: #f5f5f5;
  --yc-gray-200: #eeeeee;
  --yc-gray-300: #e0e0e0;
  --yc-gray-400: #bdbdbd;
  --yc-gray-500: #9e9e9e;
  --yc-gray-600: #757575;
  --yc-gray-700: #616161;
  --yc-gray-800: #424242;
  --yc-gray-900: #212121;
  --yc-gray-950: #0a0a0a;

  --yc-success: #4caf50;
  --yc-warning: #ff9800;
  --yc-error: #f44336;

  --yc-wave-fill: #38bdf8;
  --yc-wave-stroke: #0e3a8a;
  --yc-wave-accent: #56d1ff;
  --yc-wave-idle: #cbeafb;

  --color-bg: #fafafa;
  --color-paper: #ffffff;
  --color-elevated: #ffffff;
  --color-text: #212121;
  --color-text-secondary: #616161;
  --color-text-tertiary: #757575;
  --color-inverse: #ffffff;
  --color-inverse-muted: rgba(255, 255, 255, 0.72);
  --color-inverse-tertiary: rgba(255, 255, 255, 0.68);
  --color-inverse-subtle: rgba(255, 255, 255, 0.54);
  --color-border: #e0e0e0;
  --color-border-soft: #eeeeee;
  --color-border-strong: rgba(33, 33, 33, 0.1);
  --color-border-translucent: rgba(224, 224, 224, 0.72);
  --color-border-inverse: rgba(255, 255, 255, 0.14);
  --color-border-inverse-soft: rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(11, 118, 197, 0.18);
  --color-border-accent-strong: rgba(11, 118, 197, 0.24);
  --color-selection: rgba(11, 118, 197, 0.12);
  --color-pressed: rgba(0, 0, 0, 0.05);
  --color-focus-ring: rgba(56, 189, 248, 0.38);

  --surface-backdrop: rgba(250, 250, 250, 0.86);
  --surface-glass: rgba(255, 255, 255, 0.86);
  --surface-inverse-soft: rgba(255, 255, 255, 0.07);
  --surface-inverse-strong: rgba(255, 255, 255, 0.1);
  --surface-inverse-sheen: rgba(255, 255, 255, 0.08);
  --gradient-surface-muted: linear-gradient(180deg, var(--color-paper) 0%, var(--yc-gray-50) 100%);
  --gradient-surface-elevated: linear-gradient(180deg, var(--color-paper) 0%, #fcfdff 100%);
  --gradient-surface-accent: linear-gradient(180deg, var(--color-paper), var(--yc-primary-50));
  --gradient-page-panel: linear-gradient(145deg, #ffffff 0%, #f8fcff 52%, #f5f5f5 100%);
  --gradient-panel-alt: linear-gradient(145deg, #fbfdff 0%, #ffffff 54%, #eaf6ff 100%);
  --shadow-card-elevated: 0 14px 34px rgba(33, 33, 33, 0.05);
  --shadow-card-hover: 0 10px 24px rgba(33, 33, 33, 0.08);
  --shadow-accent-inset: inset 0 0 0 1px rgba(11, 118, 197, 0.08);
  --shadow-section: 0 24px 70px rgba(8, 42, 76, 0.1);

  --font-display: "Libre Baskerville", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-soft: 0 18px 42px rgba(33, 33, 33, 0.08);
  --shadow-blue: 0 18px 46px rgba(11, 118, 197, 0.2);

  --container: min(1120px, calc(100vw - 32px));
  --panel-min-height: 100svh;
  --panel-safe-block: clamp(var(--space-10), 7svh, var(--space-20));
  --touch-target: 44px;
  --touch-target-large: 56px;
}