/*
 * ToolForge design tokens.
 *
 * Teal accent, deliberately unlike the sibling site's blue, so the two are not
 * read as the same product. Every text/background pair below clears WCAG 2.2
 * AA (4.5:1 body, 3:1 large text and UI borders).
 *
 * Dark mode is applied via [data-tfg-theme] which an inline head script sets
 * before first paint, so there is no flash. The media query only supplies the
 * default for visitors who have never touched the toggle.
 */

:root {
  color-scheme: light;

  --tfg-bg: #ffffff;
  --tfg-bg-subtle: #f5f8f8;
  --tfg-surface: #ffffff;
  --tfg-surface-sunken: #f0f4f4;
  --tfg-border: #dee5e5;
  --tfg-border-strong: #c2cccc;
  --tfg-text: #0f1720;
  --tfg-text-muted: #576672;
  --tfg-accent: #0d7d72;
  --tfg-accent-hover: #0a635b;
  --tfg-accent-contrast: #ffffff;
  --tfg-accent-soft: #e6f4f2;
  --tfg-success: #15803d;
  --tfg-success-soft: #e7f6ec;
  --tfg-warning: #b45309;
  --tfg-warning-soft: #fdf3e7;
  --tfg-danger: #b42318;
  --tfg-danger-soft: #fdeceb;
  --tfg-overlay: rgb(15 23 32 / 0.45);

  --tfg-shadow-sm: 0 1px 2px rgb(15 23 32 / 0.06);
  --tfg-shadow-md: 0 4px 12px rgb(15 23 32 / 0.08);
  --tfg-shadow-lg: 0 12px 32px rgb(15 23 32 / 0.12);

  --tfg-radius-sm: 8px;
  --tfg-radius: 12px;
  --tfg-radius-lg: 18px;
  --tfg-radius-full: 999px;

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

  --tfg-w-text: min(720px, 100%);
  --tfg-w-wide: min(1180px, 100%);
  --tfg-gutter: clamp(16px, 4vw, 32px);

  --tfg-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --tfg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --tfg-text-xs: 0.8125rem;
  --tfg-text-sm: 0.9375rem;
  --tfg-text-base: 1rem;
  --tfg-text-lg: 1.0625rem;
  --tfg-text-xl: 1.4rem;
  --tfg-text-h1: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --tfg-text-hero: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem);
  --tfg-text-result: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem);

  --tfg-header-h: 60px;
  --tfg-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

[data-tfg-theme="dark"] {
  color-scheme: dark;

  --tfg-bg: #0b1114;
  --tfg-bg-subtle: #121a1e;
  --tfg-surface: #151e23;
  --tfg-surface-sunken: #0f171b;
  --tfg-border: #24323a;
  --tfg-border-strong: #35474f;
  --tfg-text: #e8eef0;
  --tfg-text-muted: #98a7b0;
  --tfg-accent: #2dd4bf;
  --tfg-accent-hover: #5eead4;
  --tfg-accent-contrast: #06231f;
  --tfg-accent-soft: #10312e;
  --tfg-success: #4ade80;
  --tfg-success-soft: #12291c;
  --tfg-warning: #fbbf24;
  --tfg-warning-soft: #2a2110;
  --tfg-danger: #f87171;
  --tfg-danger-soft: #2c1616;
  --tfg-overlay: rgb(0 0 0 / 0.6);

  --tfg-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --tfg-shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
  --tfg-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tfg-theme="light"]) {
    color-scheme: dark;

    --tfg-bg: #0b1114;
    --tfg-bg-subtle: #121a1e;
    --tfg-surface: #151e23;
    --tfg-surface-sunken: #0f171b;
    --tfg-border: #24323a;
    --tfg-border-strong: #35474f;
    --tfg-text: #e8eef0;
    --tfg-text-muted: #98a7b0;
    --tfg-accent: #2dd4bf;
    --tfg-accent-hover: #5eead4;
    --tfg-accent-contrast: #06231f;
    --tfg-accent-soft: #10312e;
    --tfg-success: #4ade80;
    --tfg-success-soft: #12291c;
    --tfg-warning: #fbbf24;
    --tfg-warning-soft: #2a2110;
    --tfg-danger: #f87171;
    --tfg-danger-soft: #2c1616;
    --tfg-overlay: rgb(0 0 0 / 0.6);
  }
}

/*
 * Self-hosted, split by unicode-range. A visitor on /en/ never downloads the
 * Hangul file because no character on the page falls in its range; a visitor
 * on /ko/ never downloads Cyrillic or Greek. This replaces a render-blocking
 * third-party font request with two small same-origin ones.
 */
@font-face {
  font-family: "TFG Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 100%;
}

@font-face {
  font-family: "TFG Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/pretendard-korean.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF,
    U+3000-303F, U+FF00-FFEF;
}

/* Independent site accents; contrast retained on light and dark surfaces. */
:root[data-tfg-profile="ccgolf"] { --tfg-accent:#166534; --tfg-accent-hover:#14532d; --tfg-accent-soft:#edf7ee; }
:root[data-tfg-profile="tvinghub"] { --tfg-accent:#1d4ed8; --tfg-accent-hover:#1e40af; --tfg-accent-soft:#eef2ff; }
[data-tfg-profile="ccgolf"][data-tfg-theme="dark"] { --tfg-accent:#86efac; --tfg-accent-hover:#bbf7d0; --tfg-accent-soft:#173d2b; --tfg-accent-contrast:#102719; }
[data-tfg-profile="tvinghub"][data-tfg-theme="dark"] { --tfg-accent:#93c5fd; --tfg-accent-hover:#bfdbfe; --tfg-accent-soft:#172d4f; --tfg-accent-contrast:#10223d; }