/* The slice of the tanghoong design system this product uses.
 *
 * Values are lifted verbatim from design.tanghoong.com/assets/css/tokens.css
 * so they stay comparable across properties. Only the tokens Photo Booth
 * actually reaches for are carried here — a booth has no charts, no drawers and
 * no editorial type — but nothing has been renamed or retuned.
 *
 * The rule that matters: no component below writes a literal colour, size,
 * radius, shadow or duration. If a value is needed and missing, add a token.
 */

:root {
  color-scheme: light dark;

  /* --- Surfaces: page, sunken, elevated, glass ------------------------- */
  --bg:          light-dark(#fbfbfd, #000000);
  --bg-sunken:   light-dark(#f5f5f7, #0a0a0c);
  --bg-elevated: light-dark(#ffffff, #1c1c1e);
  --bg-glass:    light-dark(#fbfbfdb8, #000000b8);

  /* --- Ink: three working weights, plus one display step above --------- */
  --text:    light-dark(#1d1d1f, #f5f5f7);
  --text-2:  light-dark(#515154, #a1a1a6);
  --text-3:  light-dark(#6e6e73, #86868b);
  --text-hi: light-dark(#000000, #ffffff);

  /* --- Lines: alpha, so they sit correctly on any surface -------------- */
  --hairline:      light-dark(#0000001a, #ffffff21);
  --hairline-soft: light-dark(#0000000f, #ffffff14);

  /* --- Accent: deep green on light, mint on dark ----------------------- */
  --accent:      light-dark(#03744e, #4dff9b);
  --accent-ink:  light-dark(#ffffff, #04140b);
  --accent-wash: color-mix(in oklab, var(--accent) 12%, transparent);
  --focus:       var(--accent);

  --accent-2:      light-dark(#8a5a00, #ffd38a);
  --accent-2-ink:  light-dark(#ffffff, #04140b);
  --accent-2-wash: color-mix(in oklab, var(--accent-2) 14%, transparent);

  /* --- Status ---------------------------------------------------------- */
  --ok:     light-dark(#03744e, #4dff9b);
  --warn:   light-dark(#8a5a00, #f5c451);
  --danger: light-dark(#b3261e, #ff6b62);
  --info:   light-dark(#0a5ec2, #6bb6ff);
  --ok-wash:     color-mix(in oklab, var(--ok) 12%, transparent);
  --warn-wash:   color-mix(in oklab, var(--warn) 14%, transparent);
  --danger-wash: color-mix(in oklab, var(--danger) 12%, transparent);

  /* Two fills that come up constantly in a dense control surface: a quiet
     control, and the line that separates one from the next when it is hovered.
     Both are the system's own .btn--quiet mix, named so they are not retyped. */
  --fill-quiet:       color-mix(in oklab, var(--text) 6%, transparent);
  --fill-quiet-hover: color-mix(in oklab, var(--text) 10%, transparent);
  --hairline-strong:  color-mix(in oklab, var(--text) 18%, transparent);

  /* --- Type ------------------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
               "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
               Menlo, Consolas, monospace;

  --fs-h1:   clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  --fs-h2:   clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-h3:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-body: 1.0625rem;   /* 17px — the baseline */
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-xs:   0.8125rem;   /* 13px */

  /* --- Spacing: a 4px scale, named by step ----------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* --- Layout ---------------------------------------------------------- */
  --container:       1120px;
  --container-prose: 720px;
  --container-mid:   940px;
  --container-wide:  1320px;   /* what the house site actually sets on sections */
  --gutter:    clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 9vw, 128px);
  --nav-h:     56px;

  /* --- Radius ---------------------------------------------------------- */
  --r-chip: 980px;
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 20px;  --r-xl: 28px;

  /* --- Shadow: light theme only, see the dark override below ----------- */
  --sh-sm: 0 1px 2px #0000000a, 0 1px 1px #00000008;
  --sh-md: 0 4px 16px #0000000f;
  --sh-lg: 0 16px 48px #0000001a;

  /* --- Motion ---------------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 0.15s;
  --dur:      0.26s;
  --dur-slow: 0.42s;

  --z-head: 40;
  --z-sheet: 50;
  --z-toast: 70;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Shadow is a light-theme device. On black it reads as dirt. */
:root[data-theme="dark"] { --sh-sm: none; --sh-md: none; --sh-lg: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sh-sm: none; --sh-md: none; --sh-lg: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; }
}

/* --- One focus ring for the whole system. Keyboard only. --------------- */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* --- The lockup -------------------------------------------------------- */

/* One mark for every property: geometry, not text. It is never recoloured and
   never set below 16px, so it carries its own tile rather than inheriting a
   surface. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}

.brand:hover { text-decoration: none; }

.brand__mark {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
}

/* The property name sits at the third ink weight beside the house name, the
   way "tanghoong design" does. */
.brand .t3 { color: var(--text-3); font-weight: 500; }