/* QTLAB visual source of truth. Usage and hierarchy: docs/design-system.md. */
:root {
  /* Brand surfaces and accessible text colors. */
  --color-paper: #f6f5f0;
  --color-ink: #20231f;
  --color-text-secondary: #565e52;
  --color-text-muted: #686d62;
  --color-line: #deded4;
  --color-line-strong: #83867b;
  --color-accent: #d4ed8b;
  --color-accent-strong: #4f692e;
  --color-focus: #548423;
  --color-inverse-surface: #252c28;
  --color-inverse-text: #f6f5f0;
  --color-inverse-muted: #c4cdc5;
  --color-inverse-line: #ffffff24;
  --color-white: #ffffff;
  --color-overlay-line: #ffffff8c;
  --color-field: #fbfaf6;
  --color-field-line: #a7ac9e;
  --color-disabled-surface: #d9dccf;
  --color-disabled-text: #686d62;
  --color-success: #4f692e;
  --color-error: #914334;
  --color-action-hover: #45513a;
  --shadow-navigation: 0 16px 22px #1d211c0a;

  /* Font families and a small, intentional weight scale. */
  --font-sans: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-latin: Arial, Helvetica, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-wordmark: 900;

  /* Fluid headings; readable body sizes stay stable at every breakpoint. */
  --text-hero: clamp(2.375rem, 1.125rem + 5.4vw, 6rem);
  --text-statement: clamp(1.875rem, 1rem + 2.5vw, 3rem);
  --text-section: clamp(1.625rem, 1.125rem + 1.5vw, 2.25rem);
  --text-title: 1.25rem;
  --text-lead: 1.375rem;
  --text-body: 1rem;
  --text-supporting: 0.875rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;
  --text-control: 0.875rem;
  --text-wordmark: 2.0625rem;
  --text-wordmark-dot: 0.8125rem;
  --text-symbol: 1.5rem;
  --text-step-number: 2rem;

  /* Print sizes for the QTDID installation guide. */
  --print-body: 11pt;
  --print-title: 24pt;

  --leading-hero: 1.25;
  --leading-heading: 1.4;
  --leading-title: 1.5;
  --leading-body: 1.8;
  --leading-supporting: 1.7;
  --leading-caption: 1.65;
  --leading-control: 1.5;
  --leading-solid: 1;
  --tracking-hero: -0.055em;
  --tracking-heading: -0.04em;
  --tracking-title: -0.025em;
  --tracking-body: -0.01em;
  --tracking-eyebrow: 0.12em;
  --tracking-wordmark: -0.06em;

  /* Sample artwork keeps its own brand treatment, apart from page copy. */
  --sample-art-surface: #dfe1d5;
  --sample-portfolio-surface: #242b29;
  --sample-portfolio-text: #eaeadd;
  --sample-portfolio-muted: #bdc7c0;
  --sample-yeoun-surface: #463b30;
  --sample-yeoun-overlay: #211c1640;
  --sample-pan-and-ink-surface: #fbfbf7;
  --sample-pan-and-ink-ink: #1947e5;
  --sample-sentryve-surface: #09152c;
  --sample-sentryve-glow: #16479466;
  --sample-sentryve-grid: #758eb30b;
  --sample-sentryve-text: #f0f5ff;
  --sample-sentryve-label: #84a9ef;
  --sample-sentryve-muted: #92a8d0;
  --sample-sentryve-line: #6e8cb970;
  --sample-sentryve-gradient-start: #77a6ff;
  --sample-sentryve-gradient-mid: #3572f0;
  --sample-sentryve-gradient-end: #1843a0;
  --sample-sentryve-ring: #7599e1;
  --sample-sentryve-shield: #6d9cf7;
  --sample-sentryve-cross: #a0bdf5;
  --sample-sentryve-point: #74a4ff;
  --sample-text-portfolio: clamp(2.25rem, 4.8vw, 4.6875rem);
  --sample-text-onyu: 2.75rem;
  --sample-text-yeoun: 4rem;
  --sample-text-wordmark: 1.8125rem;
  --sample-text-statement: clamp(1.5625rem, 3.05vw, 2.8125rem);
  --sample-text-label: 0.5625rem;
  --sample-text-detail: 0.4375rem;
  --sample-text-baseline: 0.6875rem;
  --sample-text-arrow: 0.62em;
  --sample-leading-portfolio: 0.92;
  --sample-tracking-portfolio: -0.06em;
  --sample-tracking-logo: 0.2em;
  --sample-tracking-detail: 0.56em;
}

/* Sample artwork is scaled independently of functional page text. */
@media (max-width: 1050px) {
  :root { --sample-text-portfolio: 6vw; }
}

@media (max-width: 700px) {
  :root {
    --text-wordmark: 1.8125rem;
    --sample-text-portfolio: clamp(2.125rem, 11.5vw, 5rem);
    --sample-text-onyu: 2.25rem;
    --sample-text-yeoun: 2.8125rem;
    --sample-text-wordmark: 1.3125rem;
    --sample-text-statement: clamp(1.25rem, 5.2vw, 1.9375rem);
    --sample-text-baseline: 0.625rem;
  }
}