/* =============================================================================
   Conscious Engines — Brand Stylesheet
   A framework-free port of the design system from conscious-echo-forge.
   Loaded by index.html and API.html.
   ============================================================================= */

/* ── Cal Sans UI / Text — Font Face Declarations ── */

@font-face {
  font-family: 'Cal Sans Text';
  src: url('./fonts/CalSansUI-TextLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans Text';
  src: url('./fonts/CalSansUI-TextRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans Text';
  src: url('./fonts/CalSansUI-TextMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans Text';
  src: url('./fonts/CalSansUI-TextSemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans Text';
  src: url('./fonts/CalSansUI-TextBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans UI';
  src: url('./fonts/CalSansUI-UILight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans UI';
  src: url('./fonts/CalSansUI-UIRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans UI';
  src: url('./fonts/CalSansUI-UIMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans UI';
  src: url('./fonts/CalSansUI-UISemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cal Sans UI';
  src: url('./fonts/CalSansUI-UIBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   Design Tokens — Light Theme (Conscious Engines)
   HSL values mirror conscious-echo-forge/src/index.css :root
   ============================================================================= */

:root {
  /* Surfaces */
  --background: #ffffff;
  --foreground: #0b0f12;      /* hsl 200 31% 6% */
  --card: #f4f7f4;            /* hsl 150 15% 96% */
  --card-foreground: #0b0f12;
  --popover: #f4f7f4;
  --popover-foreground: #0b0f12;

  /* Brand primary — vivid green */
  --primary: #22a035;         /* hsl 142 80% 36% */
  --primary-foreground: #fafafa;
  --primary-foreground-rgb: 250, 250, 250;
  --primary-rgb: 34, 160, 53;

  --secondary: #e9eeea;       /* hsl 150 10% 92% */
  --secondary-foreground: #303a3f;

  --muted: #edf1ed;           /* hsl 150 10% 93% */
  --muted-foreground: #5d676e;/* hsl 200 13% 42% */

  --accent: #22a035;          /* alias of primary for stt-demos components */
  --accent-rgb: 34, 160, 53;
  --accent-ink: #fafafa;
  --accent-soft: rgba(34, 160, 53, 0.10);
  --accent-bg: #d7eed9;       /* hsl 142 40% 90% */
  --accent-bg-foreground: #105c1e;

  --destructive: #dd2525;
  --destructive-foreground: #fafafa;

  --border: #dce2da;          /* hsl 150 12% 88% */
  --input: #dce2da;
  --ring: #0c7a1a;            /* hsl 142 73% 28% */

  --radius: 0.25rem;

  /* stt-demos compatibility aliases (kept so style.css/API.html can consume them) */
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #0b0f12;
  --ink-dim: #5d676e;
  --ink-faint: #8a949b;
  --line: rgba(11, 15, 18, 0.10);
  --line-soft: rgba(11, 15, 18, 0.06);
  --field: #f4f7f4;
  --green: #15803d;          /* neural-700 — darker green for text/status */
  --green-soft: #dcfce7;      /* neural-100 */
  --red: #dd2525;
  --yellow: #b45309;
  --wave-track: rgba(11, 15, 18, 0.16);

  --shadow-sm: 0 1px 2px rgba(11, 15, 18, 0.05);
  --shadow: 0 1px 2px rgba(11, 15, 18, 0.05), 0 16px 38px -20px rgba(11, 15, 18, 0.12);

  --font: "Cal Sans UI", system-ui, -apple-system, sans-serif;
  --font-display: "Cal Sans Text", "Cal Sans UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Extended brand ramps (from tailwind.config.ts) — raw hex for direct use */
  --neural-50: #f0fdf4;
  --neural-100: #dcfce7;
  --neural-200: #bbf7d0;
  --neural-300: #86efac;
  --neural-400: #4ade80;
  --neural-500: #22c55e;
  --neural-600: #16a34a;
  --neural-700: #15803d;
  --neural-800: #166534;
  --neural-900: #14532d;

  --consciousness-50: #f0faf9;
  --consciousness-100: #ccf2ee;
  --consciousness-200: #99e4de;
  --consciousness-300: #5ecec6;
  --consciousness-400: #2eb8ae;
  --consciousness-500: #1a9a92;
  --consciousness-600: #137b74;
  --consciousness-700: #0f5e59;
  --consciousness-800: #0b4541;
  --consciousness-900: #082e2b;
}

/* =============================================================================
   Dark theme — kept for the demo's theme toggle, rebased to Conscious Engines.
   ============================================================================= */

[data-theme="dark"] {
  --background: #0b0f12;
  --foreground: #f4f7f4;
  --card: #12181a;
  --card-foreground: #f4f7f4;
  --popover: #12181a;
  --popover-foreground: #f4f7f4;

  --primary: #22c55e;          /* neural-500 — brighter on dark */
  --primary-foreground: #0b0f12;
  --primary-rgb: 34, 197, 94;

  --secondary: #1b2226;
  --secondary-foreground: #d6dede;

  --muted: #1b2226;
  --muted-foreground: #9aa6a0;

  --accent: #22c55e;
  --accent-rgb: 34, 197, 94;
  --accent-ink: #0b0f12;
  --accent-soft: rgba(34, 197, 94, 0.14);
  --accent-bg: rgba(34, 197, 94, 0.16);
  --accent-bg-foreground: #86efac;

  --destructive: #f87171;
  --destructive-foreground: #0b0f12;

  --border: rgba(255, 255, 255, 0.10);
  --input: rgba(255, 255, 255, 0.10);
  --ring: #22c55e;

  --bg: #0b0f12;
  --panel: #12181a;
  --ink: #f4f7f4;
  --ink-dim: #9aa6a0;
  --ink-faint: #6b7470;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --field: #1b2226;
  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, 0.14);
  --red: #f87171;
  --yellow: #fbbf24;
  --wave-track: rgba(255, 255, 255, 0.20);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px -20px rgba(0, 0, 0, 0.6);
}

/* =============================================================================
   Base
   ============================================================================= */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

/* Strong/medium weight classes resolve to the appropriate Cal Sans cut */
h1, h2, h3, h4, h5, h6, b, strong { font-weight: 600; }
.btn-primary, .pill, .metric-val, .logo { font-weight: 700; }

a { color: var(--primary); text-decoration: none; transition: opacity 0.2s var(--ease); }
a:hover { opacity: 0.8; }

::selection { background: var(--neural-200); color: var(--neural-900); }