/* Optimized — color tokens. Values lifted verbatim from the portal mockup SVG. */

:root {
  /* Base neutrals (warm gray, light) */
  --gray-0: #ffffff;
  --gray-50: #f7f6f2;
  --gray-100: #f1efe8;
  --gray-200: #e7e5df;
  --gray-300: #dfddd6;
  --gray-500: #9a9992;
  --gray-600: #6b6a65;
  --gray-700: #5f5e5a;
  --gray-900: #1c1c1a;

  /* Accent — Optimized blue */
  --accent: #185fa5;
  --accent-hover: #14528f;
  --accent-tint: #e6f1fb;

  /* Status hues */
  --green: #3b6d11;
  --green-tint: #eaf3de;
  --amber: #854f0b;
  --amber-tint: #faeeda;
  --purple: #534ab7;
  --purple-tint: #eeedfe;
  --red: #a03123;
  --red-tint: #fae9e6;

  /* Semantic aliases */
  --bg-app: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-chrome: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hover: color-mix(in oklab, var(--gray-0), var(--gray-50) 55%);
  --border-hairline: var(--gray-200);
  --border-strong: var(--gray-300);
  --text-body: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-inverse: #ffffff;
  --icon-neutral: var(--gray-700);
  --icon-tile-neutral-bg: var(--gray-100);

  --status-live-fg: var(--green);
  --status-live-bg: var(--green-tint);
  --status-build-fg: var(--amber);
  --status-build-bg: var(--amber-tint);
  --status-external-fg: var(--gray-700);
  --status-external-bg: var(--gray-100);

  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);
}

/* Semantic aliases re-declared under the dark scope so they re-resolve
   against the dark ramp (custom properties compute where declared). */
[data-theme="dark"] {
  --bg-app: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-chrome: #1c1c1a;
  --surface-sunken: var(--gray-100);
  --border-hairline: var(--gray-200);
  --border-strong: var(--gray-300);
  --text-body: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --icon-neutral: var(--gray-700);
  --icon-tile-neutral-bg: var(--gray-100);
  --status-live-fg: var(--green);
  --status-live-bg: var(--green-tint);
  --status-build-fg: var(--amber);
  --status-build-bg: var(--amber-tint);
  --status-external-fg: var(--gray-600);
  --status-external-bg: #26241f;
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);
}

/* Dark ramp — values lifted verbatim from uploads/optimized-portal-mockup-dark.svg */
[data-theme="dark"] {
  --gray-0: #232320;
  --gray-50: #141413;
  --gray-100: #2a2925;
  --gray-200: #33322e;
  --gray-300: #3a3934;
  --gray-500: #74736e;
  --gray-600: #a3a29b;
  --gray-700: #b4b2a9;
  --gray-900: #ecebe6;

  --accent: #7fb6e6;
  --accent-hover: #9cc7ec;
  --accent-tint: #17293a;

  --green: #9fd98a;
  --green-tint: #1e2b1c;
  --amber: #efc06a;
  --amber-tint: #2e2410;
  --purple: #afa9ec;
  --purple-tint: #221f3a;
  --red: #e89a8d;
  --red-tint: #38201c;

  --text-inverse: #1c1c1a;
  --surface-hover: color-mix(in oklab, var(--gray-0), var(--gray-100) 55%);
}