/* CASNAN Color System */
:root {
  /* --- Brand --- */
  --casnan-cyan: #28AED4;        /* primary brand mark color (logo) */
  --casnan-cyan-600: #1E97BC;    /* hover/darker cyan */
  --casnan-cyan-100: #DDF2F8;    /* tint surface */
  --casnan-blue: #1B75BB;        /* action blue — buttons, links */
  --casnan-blue-700: #155E97;    /* pressed/darker action blue */
  --casnan-blue-100: #E3EFF8;

  /* --- Ink / Navy (dark surfaces) --- */
  --navy-900: #0B1E2E;           /* darkest — footer, hero stat bar */
  --navy-800: #10293C;
  --navy-700: #163449;
  --navy-600: #24455C;

  /* --- Neutrals --- */
  --white: #FFFFFF;
  --gray-50: #F5F7F9;            /* section background */
  --gray-100: #EDF1F4;
  --gray-200: #E1E7EC;           /* borders, hairlines */
  --gray-300: #CBD4DB;
  --gray-400: #9AA8B2;
  --gray-500: #6B7A85;           /* muted text */
  --gray-700: #3B4650;
  --gray-900: #1A2530;           /* primary text */

  /* --- Semantic status --- */
  --success: #2FA36B;
  --success-100: #E2F3EA;
  --warning: #E7A13B;            /* safety / caution */
  --warning-100: #FBF0DC;
  --danger: #D6483B;
  --danger-100: #FAE5E3;
  --info: var(--casnan-cyan);

  /* --- Semantic aliases --- */
  --brand-primary: var(--casnan-cyan);
  --brand-action: var(--casnan-blue);
  --text-strong: var(--gray-900);
  --text-body-color: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: #A9B8C4;
  --text-accent: var(--casnan-cyan);
  --link: var(--casnan-blue);
  --link-hover: var(--casnan-blue-700);

  --surface-page: var(--white);
  --surface-muted: var(--gray-50);
  --surface-card: var(--white);
  --surface-dark: var(--navy-900);
  --surface-dark-2: var(--navy-800);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-on-dark: rgba(255,255,255,0.14);

  --icon-badge-bg: var(--casnan-cyan);
  --icon-on-badge: var(--white);
}