/* Hallmark tokens — hungw.id.vn · v8 white premium
 * theme: custom achromatic + platinum glow (chroma thấp — không xanh dương)
 * light-first (user chốt: "trang premium trắng"), dark là secondary toggle
 */

:root {
  color-scheme: light;

  /* light = mặc định */
  --color-paper:    oklch(98% 0.002 250);   /* theme-color light: #f7f8fa */
  --color-paper-2:  oklch(99.4% 0.001 250);
  --color-paper-3:  oklch(95.5% 0.005 250);
  --color-rule:     oklch(90% 0.006 250);
  --color-neutral:  oklch(55% 0.008 250);
  --color-muted:    oklch(50% 0.012 250);
  --color-ink:      oklch(16% 0.004 250);
  --color-accent:       oklch(16% 0.004 250);
  --color-accent-ink:   oklch(98% 0.002 250);
  --color-silver:       oklch(72% 0.015 250);   /* platinum — glow/beam */
  --color-shimmer-band: oklch(78% 0.012 250);   /* dải sáng chạy trên tên hero */
  --color-glow:         oklch(64% 0.02 250 / 0.5);
  --color-glow-soft:    oklch(64% 0.02 250 / 0.22);
  --color-spot:         oklch(70% 0.03 250 / 0.16);
  --color-shine:        oklch(100% 0 0 / 0.5);
  --color-focus:        oklch(45% 0.02 250);
  --color-nav-bg:       oklch(98% 0.002 250 / 0.8);

  --shadow-card:       0 8px 30px oklch(16% 0.004 250 / 0.07);
  --shadow-card-hover: 0 16px 44px oklch(16% 0.004 250 / 0.13);
  --shadow-glow:       0 0 30px var(--color-glow);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, monospace;

  --text-sm: 0.8rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-display: clamp(3.25rem, 9.5vw, 6.75rem);  /* hero name */
  --text-big: clamp(1.75rem, 4.5vw, 3.25rem);      /* contact email */

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* bo góc — user chốt */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 200ms;
  --dur-long: 420ms;

  --z-base: 1;
  --z-sticky-nav: 300;

  --measure: 62ch;
  --container: 68rem;
  --pad-edge: clamp(1.25rem, 5vw, 2.5rem);
  --nav-h: calc(var(--space-md) * 2 + 56px + 2px);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:    oklch(14% 0.005 250);   /* theme-color dark: #08090b */
  --color-paper-2:  oklch(17.5% 0.005 250);
  --color-paper-3:  oklch(22% 0.005 250);
  --color-rule:     oklch(29% 0.006 250);
  --color-neutral:  oklch(62% 0.006 250);
  --color-muted:    oklch(73% 0.005 250);
  --color-ink:      oklch(95% 0.003 250);
  --color-accent:       oklch(95% 0.003 250);
  --color-accent-ink:   oklch(14% 0.005 250);
  --color-silver:       oklch(70% 0.014 250);
  --color-shimmer-band: oklch(90% 0.006 250);   /* dark: dải phải sáng hơn nền chữ */
  --color-glow:         oklch(72% 0.018 250 / 0.32);
  --color-glow-soft:    oklch(72% 0.018 250 / 0.14);
  --color-spot:         oklch(80% 0.02 250 / 0.12);
  --color-shine:        oklch(100% 0 0 / 0.28);
  --color-focus:        oklch(78% 0.01 250);
  --color-nav-bg:       oklch(14% 0.005 250 / 0.8);

  --shadow-card:       0 8px 30px oklch(0% 0 0 / 0.35);
  --shadow-card-hover: 0 16px 44px oklch(0% 0 0 / 0.5);
}