/* Clocktower Connections — Color tokens
   Pulled from the brand emblem: deep navy ring, gold rope border,
   sunset-orange sky, connection-blue node network, cream/paper ground. */
:root {
  /* ---- Brand scales ---- */

  /* Navy — primary brand color (the ring, the wordmark, trust) */
  --navy-950: #0B1730;
  --navy-900: #0E1E3D;
  --navy-800: #122F5C;
  --navy-700: #16294F;   /* core brand navy */
  --navy-600: #1B3567;
  --navy-500: #234584;
  --navy-400: #355DA3;
  --navy-300: #5A7FBD;
  --navy-200: #9DB4D8;
  --navy-100: #D4DEEE;
  --navy-50:  #EDF2F9;

  /* Connection blue — the node/network motif, links & accents */
  --blue-600: #2E63A8;
  --blue-500: #3F7CC4;   /* core connection blue */
  --blue-400: #5C95D4;
  --blue-300: #8FB7E3;
  --blue-100: #DCE9F6;

  /* Gold — the rope border & clock face; premium / highlight accent */
  --gold-600: #C8861A;
  --gold-500: #E8A317;   /* core brand gold */
  --gold-400: #F2B544;
  --gold-300: #F7CC79;
  --gold-100: #FBEBC6;

  /* Sunset orange — energy, calls to action, the sky behind the tower */
  --orange-600: #D26E11;
  --orange-500: #F0851D;  /* core sunset orange */
  --orange-400: #F59E45;
  --orange-100: #FCE4CC;

  /* Cream / paper — warm grounds (the architectural sketch paper) */
  --cream-50:  #FDFBF5;
  --cream-100: #FAF6EC;   /* core paper background */
  --cream-200: #F2EBD9;
  --cream-300: #E7DCC2;

  /* Neutral ink & gray — text and UI structure (warm-tinted) */
  --ink-900: #14213A;
  --ink-700: #2C3852;
  --gray-600: #51607A;
  --gray-500: #6B7891;
  --gray-400: #97A1B4;
  --gray-300: #C4CBD7;
  --gray-200: #E0E4EC;
  --gray-100: #EFF1F6;
  --white:    #FFFFFF;

  /* Semantic status */
  --success: #2F8F5B;
  --success-bg: #E3F2E9;
  --warning: #E8A317;
  --warning-bg: #FBEBC6;
  --danger:  #C5483B;
  --danger-bg: #F8E2DF;
  --info: #3F7CC4;
  --info-bg: #DCE9F6;

  /* ===== Semantic aliases — use these in product UI ===== */
  --brand: var(--navy-700);
  --brand-strong: var(--navy-900);
  --brand-accent: var(--gold-500);
  --brand-energy: var(--orange-500);
  --brand-link: var(--blue-500);

  --bg-page: var(--cream-100);
  --bg-page-alt: var(--cream-200);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--cream-200);
  --surface-navy: var(--navy-700);
  --surface-navy-deep: var(--navy-900);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --text-on-navy: #EEF3FB;
  --text-on-navy-muted: var(--navy-200);
  --text-link: var(--blue-600);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--navy-200);
  --border-gold: var(--gold-500);

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