/* Clarity HR design tokens.
   One accent, one neutral scale, one radius system. Dark mode swaps values only. */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg: #fcfcfc;
  --bg-2: #f5f5f5;
  --bg-3: #ededed;
  --line: #e6e6e6;
  --line-2: #d9d9d9;

  /* Text */
  --text: #202020;
  --text-2: #646464;
  --text-3: #8d8d8d;

  /* Dark panels (stay dark in both modes) */
  --panel: #1f1f1f;
  --panel-2: #2a2a2a;
  --panel-3: #333333;
  --panel-line: rgba(255, 255, 255, 0.1);
  --panel-text: #f5f5f5;
  --panel-text-2: #a8a8a8;

  /* Accent: "Clarity Teal". Swap this one value to rebrand. */
  --accent: #0e7c6b;
  --accent-hover: #0b6a5b;
  --accent-tint: #e6f4f1;
  --accent-tint-2: #cde9e3;
  --accent-contrast: #ffffff;

  /* Status (semantic only, used sparingly inside product previews) */
  --ok: #2a8a4a;
  --warn: #b7791f;

  /* Shape lock: cards 16, buttons 10, inputs 10, tiles 12 */
  --r-card: 16px;
  --r-btn: 10px;
  --r-input: 10px;
  --r-tile: 12px;

  /* Type */
  --font-sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 1216px;
  --gutter: 24px;
  --nav-h: 72px;
  --section-y: 112px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;

  /* Z-index scale */
  --z-nav: 50;
  --z-menu: 60;

  /* Shadows are tinted to the page hue, never pure black */
  --shadow-card: 0 1px 2px rgba(32, 32, 32, 0.04), 0 8px 24px rgba(32, 32, 32, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010;
    --bg-2: #171717;
    --bg-3: #1f1f1f;
    --line: #262626;
    --line-2: #303030;

    --text: #f0f0f0;
    --text-2: #a3a3a3;
    --text-3: #7a7a7a;

    --panel: #1c1c1c;
    --panel-2: #262626;
    --panel-3: #303030;
    --panel-line: rgba(255, 255, 255, 0.12);

    --accent: #2fb39e;
    --accent-hover: #3cc4ae;
    --accent-tint: rgba(47, 179, 158, 0.12);
    --accent-tint-2: rgba(47, 179, 158, 0.22);
    --accent-contrast: #0a1f1b;

    --ok: #4cc36e;
    --warn: #d9a441;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}