/* ==========================================================================
   CM Tech Software — BRAND theme: dark navy + teal (product studio)
   --------------------------------------------------------------------------
   Scoped under `html.theme-brand`, loaded AFTER the compiled Tailwind so it
   wins the cascade. Recolors the whole site by overriding the --color-* design
   tokens the compiled utilities reference — no Tailwind rebuild required.

   Brand system (do not deviate):
     Background dark navy .... #0a0e1a
     Primary accent teal ..... #06b6d4
     Secondary lighter teal .. #2dd4bf
     Typeface ................ Inter (self-hosted, below)
   The base compiled theme is already a navy ramp with a steel-BLUE accent;
   here we pin the exact brand navy and swap the accent ramp BLUE -> TEAL.
   ========================================================================== */

/* --- Self-hosted Inter (variable, no Google Fonts CDN) -------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
}

html.theme-brand {
  /* Apply Inter site-wide. The `font-sans` utility reads var(--font-sans). */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
               'Segoe UI Emoji';

  /* Exact brand navy for the page background. The rest of the navy surface
     ramp from the compiled @theme is already on-brand and kept as-is. */
  --color-ink-950: #0a0e1a;   /* page background — brand navy */

  /* Accent ramp — TEAL (was steel-azure blue). AA-checked on the navy page. */
  --color-cyan-100: #cffafe;
  --color-cyan-200: #99f6e4;
  --color-cyan-300: #2dd4bf;   /* secondary teal — links / accent text */
  --color-cyan-400: #06b6d4;   /* primary teal — CTA fills */
  --color-cyan-500: #0891b2;   /* focus / emphasis */
  --color-cyan-600: #0e7490;
  --color-cyan-glow: #06b6d4;

  color-scheme: dark;
}

/* Text selection — teal on navy. */
html.theme-brand ::selection { background: var(--color-cyan-400); color: #04222a; }

/* Dotted hero grid — faint teal dots on the navy surface. */
html.theme-brand .bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(6,182,212,0.10) 1px, transparent 0);
}

/* Hero glow — soft teal wash (restrained, not a bloom). */
html.theme-brand .bg-hero-glow {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(45,212,191,0.10), transparent 60%);
}

/* Primary CTA depth — teal drop shadow / glow. */
html.theme-brand .btn-glow {
  box-shadow:
    0 1px 2px rgba(6,182,212,0.20),
    0 10px 30px -10px rgba(6,182,212,0.45);
}
html.theme-brand .btn-glow:hover {
  box-shadow:
    0 2px 6px rgba(6,182,212,0.30),
    0 16px 40px -10px rgba(45,212,191,0.55);
}

/* Cards — teal border + lift on hover. */
html.theme-brand .card-glow:hover {
  border-color: var(--color-cyan-500);
  box-shadow: 0 14px 40px -20px rgba(6,182,212,0.35);
}

/* Divider line — teal. */
html.theme-brand .divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,0.45), transparent);
}

/* Eyebrow pill — soft teal tint. */
html.theme-brand .eyebrow {
  background: rgba(6,182,212,0.10);
  border-color: rgba(6,182,212,0.30);
  color: var(--color-cyan-300);
}

/* Form focus ring — teal. */
html.theme-brand input:focus,
html.theme-brand textarea:focus,
html.theme-brand select:focus {
  border-color: var(--color-cyan-400) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.30) !important;
}