/* ============================================================
   tinhthanhpho.com — design tokens (HVN Group Design System)
   Light values: designs/README.md "Design Tokens" and
   _ds/.../colors_and_type.css. Dark values: the design system's
   own dark theme (_ds/.../ui_kits/webapp-v2/theme.css).
   Components only use these variables, so a theme is one remap.
   ============================================================ */

@font-face {
  font-family: 'Google Sans';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/GoogleSans-Variable.woff2') format('woff2-variations'), url('/fonts/GoogleSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  src: url('/fonts/GoogleSans-Italic-Variable.woff2') format('woff2-variations'), url('/fonts/GoogleSans-Italic-Variable.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* brand */
  --color-primary: #EA4445;
  --color-primary-dark: #C93939;
  --color-on-primary: #FFFFFF;
  --color-tint: #FDECEC;
  --color-tint-border: #F5C6C6;
  --color-hover-bg: #FFFAFA;
  --color-link: #C93939;
  --color-tint-fg: #C23535;     /* text on --color-tint (AA 4.77; design #C93939 is 4.45) */

  /* neutrals */
  --color-bg: #FFFFFF;          /* page */
  --color-card: #FFFFFF;        /* cards, menus */
  --color-surface: #F5F5F5;     /* sections, table heads, wells */
  --color-heading: #1A1A1A;
  --color-ink: #333333;         /* body text */
  --color-text-2: #595959;      /* secondary text */
  --color-muted: #707070;       /* captions, quiet icons (AA 4.95; design #808080 is 3.95) */
  --color-hairline: #ECECEC;
  --color-border: #DCDCDC;
  --color-border-input: #BFBFBF;

  /* feedback (never decorative) */
  --color-success: #28A745; --color-success-tint: #E7F6EC; --color-success-fg: #1E7B34;
  --color-warning: #FFC107; --color-warning-tint: #FFF6DD; --color-warning-fg: #8A6400;
  --color-info: #17A2B8;    --color-info-tint: #E4F4F7;    --color-info-fg: #0F6B7A;
  /* destructive actions get a graver red than the brand red */
  --color-danger: #A82822;  --color-danger-tint: #F7E5E4;  --color-danger-fg: #8C1F1A;

  /* dark blocks (code, footer, admin sidebar) */
  --color-code-bg: #1A1A1A;
  --color-code-fg: #ECECEC;
  --color-footer-bg: #1A1A1A;
  --color-footer-fg: #BFBFBF;
  --color-footer-line: #333333;
  --color-footer-muted: #8A8A8A;

  /* type */
  --font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-32: 2rem;
  --fs-h1: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h1-hero: clamp(2rem, 5vw, 3.25rem);
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.65;
  --tracking-tight: -0.02em; --tracking-caps: 0.08em;

  /* spacing (4px grid) */
  --sp-1: 4px; --sp-1h: 6px; --sp-2: 8px; --sp-2h: 10px; --sp-3: 12px; --sp-3h: 14px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px;

  /* radius */
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-24: 24px; --r-pill: 999px;

  /* elevation */
  --shadow-sm: 0 1px 3px rgba(35, 31, 32, 0.12);
  --shadow-md: 0 4px 12px rgba(35, 31, 32, 0.08), 0 2px 4px rgba(35, 31, 32, 0.05);
  --shadow-lg: 0 12px 28px rgba(35, 31, 32, 0.10);
  --shadow-red: 0 8px 24px rgba(234, 68, 69, 0.28);
  --focus-ring: 0 0 0 3px rgba(234, 68, 69, 0.45);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  /* layout */
  --container: 1200px;
  --gutter: 20px;
  --header-h: 61px;
}

/* Dark theme: an explicit choice, or the OS preference when no choice was made.
   The choice is applied client-side before first paint (layouts' inline script),
   so server HTML never depends on it and stays cacheable. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary-dark: #D94041;
  --color-tint: rgba(234, 68, 69, 0.16);
  --color-tint-border: rgba(234, 68, 69, 0.40);
  --color-hover-bg: rgba(234, 68, 69, 0.08);
  --color-link: #FF7B7C;
  --color-tint-fg: #FF7B7C;

  --color-bg: #131316;
  --color-card: #1C1D21;
  --color-surface: #1C1D21;
  --color-heading: #F4F4F6;
  --color-ink: #E9E9EC;
  --color-text-2: #B9BAC2;
  --color-muted: #9A9AA3;
  --color-hairline: #2D2E34;
  --color-border: #3A3B42;
  --color-border-input: #6C6D77; /* 3:1 against cards */

  --color-success-tint: rgba(40, 167, 69, 0.16);  --color-success-fg: #6FD98A;
  --color-warning-tint: rgba(255, 193, 7, 0.16);  --color-warning-fg: #FFD666;
  --color-info-tint: rgba(23, 162, 184, 0.16);    --color-info-fg: #6CCFDE;
  --color-danger: #C9302A; --color-danger-tint: rgba(168, 40, 34, 0.22); --color-danger-fg: #FF8A82;

  --color-code-bg: #0E0E10;
  --color-footer-bg: #0E0E10;
  --color-footer-line: #2D2E34;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.45);
  --shadow-red: 0 8px 22px rgba(234, 68, 69, 0.35);
  --focus-ring: 0 0 0 3px rgba(255, 107, 107, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary-dark: #D94041;
    --color-tint: rgba(234, 68, 69, 0.16);
    --color-tint-border: rgba(234, 68, 69, 0.40);
    --color-hover-bg: rgba(234, 68, 69, 0.08);
    --color-link: #FF7B7C;
  --color-tint-fg: #FF7B7C;

    --color-bg: #131316;
    --color-card: #1C1D21;
    --color-surface: #1C1D21;
    --color-heading: #F4F4F6;
    --color-ink: #E9E9EC;
    --color-text-2: #B9BAC2;
    --color-muted: #9A9AA3;
    --color-hairline: #2D2E34;
    --color-border: #3A3B42;
    --color-border-input: #6C6D77; /* 3:1 against cards */

    --color-success-tint: rgba(40, 167, 69, 0.16);  --color-success-fg: #6FD98A;
    --color-warning-tint: rgba(255, 193, 7, 0.16);  --color-warning-fg: #FFD666;
    --color-info-tint: rgba(23, 162, 184, 0.16);    --color-info-fg: #6CCFDE;
    --color-danger: #C9302A; --color-danger-tint: rgba(168, 40, 34, 0.22); --color-danger-fg: #FF8A82;

    --color-code-bg: #0E0E10;
    --color-footer-bg: #0E0E10;
    --color-footer-line: #2D2E34;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.45);
    --shadow-red: 0 8px 22px rgba(234, 68, 69, 0.35);
    --focus-ring: 0 0 0 3px rgba(255, 107, 107, 0.55);
  }
}