/* Opteris Partners — Color tokens
   Derived from brand assets: deep navy field, brand blue symbol,
   light-cyan accent (arrow tip / "PARTNERS"). */

:root {
  /* ---- Base: Navy / Ink ---- */
  --navy-950: #081A2E;
  --navy-900: #0C243C; /* hero / OG background */
  --navy-800: #122E4A;
  --navy-700: #1A3A5C;
  --navy-600: #243C60; /* "OPTERIS" wordmark (dark) */
  --navy-500: #2E4A70;

  /* ---- Brand Blue (primary) ---- */
  --blue-700: #357AC0;
  --blue-600: #4A8CD0;
  --blue-500: #609CD8; /* brand primary — the symbol blue */
  --blue-400: #7DB0E0;
  --blue-300: #9BC4EA;
  --blue-200: #C2DBF1;
  --blue-100: #E4EFFA;

  /* ---- Cyan (accent) ---- */
  --cyan-600: #5FB6E6;
  --cyan-500: #84CCF0; /* arrow tip / "PARTNERS" */
  --cyan-400: #9BD7F3;
  --cyan-300: #B9E3F7;
  --cyan-100: #E6F5FC;

  /* ---- Cool neutrals ---- */
  --white:    #FFFFFF;
  --gray-50:  #F5F8FB;
  --gray-100: #EAF0F6;
  --gray-200: #D8E2EC;
  --gray-300: #BDCCDB;
  --gray-400: #94A7BC;
  --gray-500: #6B8197;
  --gray-600: #4E6275;
  --gray-700: #36475A;
  --gray-800: #21303F;
  --gray-900: #0F1C28;

  /* ---- Semantic status ---- */
  --success-500: #2E9E6B;
  --success-100: #DCF1E7;
  --warning-500: #D9A23B;
  --warning-100: #F7ECD3;
  --danger-500:  #D2543F;
  --danger-100:  #F7E0DB;
  --info-500:    var(--blue-500);
  --info-100:    var(--blue-100);

  /* ---- Semantic aliases (default = light app surface) ---- */
  --bg-page:        var(--gray-50);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-inset:  var(--gray-50);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);

  --text-strong:  var(--navy-900);
  --text-body:    var(--gray-800);
  --text-muted:   var(--gray-500);
  --text-faint:   var(--gray-400);
  --text-inverse: var(--white);
  --text-link:    var(--blue-600);

  --accent:          var(--blue-500);
  --accent-hover:    var(--blue-600);
  --accent-active:   var(--blue-700);
  --accent-soft:     var(--blue-100);
  --accent-contrast: var(--white);

  --focus-ring: var(--blue-400);

  /* Secondary + brand-tone hooks (default = navy brand; remapped under [data-brand="ai-os"]) */
  --secondary:       var(--blue-500);
  --secondary-hover: var(--blue-600);
  --secondary-fg:    var(--blue-700);
  --secondary-soft:  var(--blue-100);
  --tone-brand-bg:   var(--blue-100);
  --tone-brand-fg:   var(--blue-700);
}

/* ---- Dark theme (hero / marketing surfaces) ---- */
[data-theme="dark"] {
  --bg-page:        var(--navy-900);
  --surface-card:   var(--navy-800);
  --surface-raised: var(--navy-700);
  --surface-sunken: var(--navy-950);
  --surface-inset:  var(--navy-950);

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.24);

  --text-strong:  var(--white);
  --text-body:    var(--blue-200);
  --text-muted:   #8FA7BE;
  --text-faint:   #5E768D;
  --text-inverse: var(--navy-900);
  --text-link:    var(--cyan-500);

  --accent:          var(--blue-500);
  --accent-hover:    var(--blue-400);
  --accent-active:   var(--cyan-500);
  --accent-soft:     rgba(96, 156, 216, 0.16);
  --accent-contrast: var(--navy-950);

  --focus-ring: var(--cyan-500);
}