/* Agency Theme
   - Owns all color tokens for light and dark.
   - core.css provides structure, spacing, typography, and component shells.
*/

/* Light */
:root {
  /* Base colors */
  --color-bg: #f4f4f4;
  --color-fg: #0b1020;
  --color-muted: #4d5768;
  --color-muted-strong: #272e3d;

  /* Brand */
  --color-brand: #1d63d8;
  --color-brand-hover: #1955c2;
  --color-brand-active: #1547a8;
  --color-brand-contrast: #ffffff;
  --color-accent-orange: #ff8a3d;

  /* Surfaces & borders */
  --color-surface: #f6f8fb;
  --color-border: #dde2e9;
  --color-border-hover: #c6d5e7; /* slightly lighter for hover */
  --color-border-input: #cbd2dc;
  --nav-current-ring: rgba(0,0,0,.25);

  /* Buttons */
  --color-button: #1d4ed8;
  --color-button-hover: #1b44c2;
  --color-button-active: #1739a9;
  --color-button-contrast: #ffffff;

  /* Hero panel */
  --color-hero-panel-bg: rgba(255,255,255,.8);
  --color-hero-panel-border: rgba(0,0,0,.06);

  /* Controls */
  --focus-ring: rgba(43,127,255,.35);
  --button-secondary-bg: rgba(43,127,255,.12);
  --button-secondary-bg-hover: rgba(43,127,255,.22);
  --button-secondary-bg-active: rgba(43,127,255,.28);
}

/* Dark */
[data-theme="dark"] {
  --color-bg: #0c1020;
  --color-fg: #e6edf3;
  --color-muted: #a7b7c6;
  --color-muted-strong: #b8c3cf;

  --color-brand: #67a8ff;
  --color-brand-hover: #5893e0;
  --color-brand-active: #4b7fbd;
  --color-brand-contrast: #071124;
  --color-accent-orange: #ff8a3d;

  --color-surface: #141a2e;
  --color-border: #1f2742;
  --color-border-hover: #2a3766; /* slightly lighter for hover in dark */
  --nav-current-ring: rgba(230, 237, 243, .35);

  --color-button: #1e40af;
  --color-button-hover: #1b3a9f;
  --color-button-active: #17328a;
  --color-button-contrast: #ffffff;

  --color-hero-panel-bg: rgba(12,16,32,.78);
  --color-hero-panel-border: rgba(255,255,255,.08);
  /* Typography nuance */
  /* In dark mode, keep hero subtitle readable using foreground color */
  /* Controls */
  --focus-ring: rgba(103, 168, 255, .35);
  --button-secondary-bg: rgba(103, 168, 255, .18);
  --button-secondary-bg-hover: rgba(103, 168, 255, .24);
  --button-secondary-bg-active: rgba(103, 168, 255, .30);
}

/* Component-level tweaks steered by theme */
[data-theme="dark"] .hero-sub { color: var(--color-fg); }