/* ==========================================================================
   BitByte Theme — centralized design tokens
   Single source of truth for color, type, radius, shadow, spacing.
   Loaded on every page BEFORE style.css. Change a value here once;
   every page that uses var(--...) picks it up. Do not hardcode hex
   in style.css / responsive.css / page <style> blocks — reference
   these variables instead. See agent-rules/theme.md for the rules.
   ========================================================================== */

:root {
  /* ---- Brand accent (single accent, no second hue) ---- */
  --color-primary: #1d9577;
  --color-primary-dark: #157a61;      /* pressed/darker fill */
  --color-primary-focus: #22ab89;     /* focus ring */
  --color-primary-light: #e3f5f0;     /* tint background for hovers/badges on light surfaces */
  --color-primary-on-dark: #35d9ae;   /* brighter tint for links/accents on dark tiles */

  /* ---- Text ---- */
  --color-ink: #1d1d1f;               /* headings */
  --color-body: #1d1d1f;              /* body text on light surfaces */
  --color-body-secondary: #666666;    /* secondary/muted paragraph text on light surfaces */
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;
  --color-body-on-dark: #ffffff;
  --color-body-on-dark-muted: #cccccc;

  /* ---- Surfaces ---- */
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f7fa;  /* off-white section tint, close to Apple's f5f5f7, tuned slightly cool */
  --color-surface-pearl: #fafbfc;
  --color-surface-tile-1: #16211e;    /* primary dark surface (header/hero/footer) */
  --color-surface-tile-2: #1a2624;    /* micro-step lighter, for adjacent dark tiles */
  --color-surface-tile-3: #121c19;    /* micro-step darker */

  /* ---- Borders ---- */
  --color-divider-soft: #f0f0f0;
  --color-hairline: #e0e0e0;

  /* ---- On-color text ---- */
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* ---- Semantic (distinct from brand accent) ---- */
  --color-success: #10b981;

  /* ---- Typography ---- */
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Radius scale ---- */
  --radius-none: 0px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Elevation ----
     One signature shadow, reserved for product/portfolio imagery resting
     on a surface. Chrome (nav, buttons, cards) stays flat + hairline. */
  --shadow-image: 0 12px 30px rgba(0, 0, 0, 0.18);
  --shadow-hairline: 0 0 0 1px var(--color-hairline);

  /* ---- Spacing scale (8px base) ---- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  --transition: all 0.3s ease;

  /* ---- Typography weight rule ----
     Headings are always 600, never 700. Body/buttons/nav are always 400,
     never 500 — this repo's weight ladder is 400 / 600 only. */
  --weight-heading: 600;
  --weight-body: 400;
}