/*
 * Theme Name:  FangTech
 * Theme URI:   https://fangtech.dev
 * Description: Custom WordPress theme for FangTech — tech reviews, gaming controllers and mechanical keyboards. Visually matches the Astro prototype.
 * Version:     1.0.0
 * Author:      FangTech
 * Author URI:  https://fangtech.dev
 * License:     GPL-2.0-or-later
 * Text Domain: fangtech
 *
 * ==========================================================================
 * Design tokens — ported from Astro src/styles/global.css
 * The palette, type scale and spacing are modelled on hlplanet.com.
 * Dark header/footer (#0e131a) over a light page, one electric-blue accent.
 * Sora for headings, DM Sans for body copy.
 * ==========================================================================
 */

/* ---- @font-face declarations are in assets/css/fonts.css ---- */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f6f6f6;

  /* Ink */
  --fg: #161616;
  --fg-muted: #585858;
  --fg-subtle: #8a8a8a;

  /* Lines */
  --border: #d9d9d9;
  --border-strong: #b4b4b4;

  /* The single accent. Buttons, links, category labels, hover states. */
  --accent: #0038ff;
  --accent-hover: #0033e9;

  /* Dark chrome — header and footer stay dark in BOTH themes. */
  --chrome-bg: #0e131a;
  --chrome-fg: #ffffff;
  --chrome-fg-muted: #8e9aa6;
  --chrome-border: #1e2733;

  /* Scrim over card images */
  --scrim: rgba(22, 22, 22, 0.5);

  /* Type */
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale */
  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-md:   1.125rem;
  --size-lg:   1.5rem;
  --size-xl:   2rem;
  --size-2xl:  2.25rem;
  --size-3xl:  3rem;

  --track-heading: -0.04em;
  --track-title:   -0.02em;
  --leading-tight:  1.1;
  --leading-normal: 1.5;
  --leading-prose:  1.6;

  --measure:      580px;
  --measure-wide: 1240px;
  --page-pad:     1.5rem;

  --radius:         2px;
  --radius-control: 4px;
  --header-h:       3.75rem;
}

/* Dark theme (toggle sets data-theme="dark" on <html>) */
:root[data-theme='dark'] {
  --bg: #161616;
  --bg-raised: #1e1e1e;
  --bg-sunken: #232323;
  --fg: #ffffff;
  --fg-muted: #cdcdcd;
  --fg-subtle: #8f8f8f;
  --border: #343434;
  --border-strong: #4a4a4a;
  --accent: #ffffff;
  --accent-hover: #e6e6e6;
  --chrome-bg: #0e0e0e;
  --chrome-border: #262626;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #161616;
    --bg-raised: #1e1e1e;
    --bg-sunken: #232323;
    --fg: #ffffff;
    --fg-muted: #cdcdcd;
    --fg-subtle: #8f8f8f;
    --border: #343434;
    --border-strong: #4a4a4a;
    --accent: #ffffff;
    --accent-hover: #e6e6e6;
    --chrome-bg: #0e0e0e;
    --chrome-border: #262626;
  }
}