/* ============================================================
   Grace & Truth Church — Color tokens
   Derived from the real brand mark: slate blue-gray ground,
   cerulean/teal tree & book, sage→lime leaf greens, white.
   ============================================================ */

:root {
  /* ---- Slate blue-gray (primary brand ground — logo background) ---- */
  --slate-900: #212B33;
  --slate-800: #2C3843;
  --slate-700: #3C4C59; /* THE brand slate */
  --slate-600: #4E606E;
  --slate-500: #647585;
  --slate-400: #8896A3;
  --slate-300: #B3BFC8;
  --slate-200: #D5DCE2;
  --slate-100: #E8ECEF;
  --slate-50:  #F4F6F8;

  /* ---- Cerulean / teal (the tree & book — primary accent) ---- */
  --blue-900: #1B3F54;
  --blue-800: #244F67;
  --blue-700: #306B91;
  --blue-600: #3B88AF;
  --blue-500: #4496B7; /* THE brand teal */
  --blue-400: #67ADCB;
  --blue-300: #97C8DC;
  --blue-200: #C4E0EB;
  --blue-100: #E5F1F6;

  /* ---- Leaf greens (life & growth — secondary accent) ---- */
  --leaf-700: #3C7A57;
  --leaf-600: #4F9A6B;
  --leaf-500: #76AF85; /* sage */
  --leaf-400: #95C58C;
  --lime-500: #A8CA55; /* chartreuse leaf */
  --lime-400: #BCD877;
  --lime-200: #E2EDC1;

  /* ---- Neutrals (cool, clean) ---- */
  --white: #FFFFFF;
  --mist-50:  #F5F7F9;
  --mist-100: #EBEFF2;
  --mist-200: #DCE3E8;
  --ink-900: #1E2830;
  --ink-700: #36434E;

  /* ---- Semantic status ---- */
  --success: #4F9A6B;
  --warning: #C9892F;
  --danger:  #C0533F;
  --info:    #3B88AF;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components/UI
     ============================================================ */

  /* Brand */
  --brand:         var(--slate-700);
  --brand-strong:  var(--slate-800);
  --brand-deep:    var(--slate-900);
  --accent:        var(--blue-500);   /* teal — primary interactive */
  --accent-strong: var(--blue-700);
  --leaf:          var(--leaf-500);   /* growth / life highlight */
  --leaf-strong:   var(--leaf-600);
  --lime:          var(--lime-500);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-400);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: var(--slate-300);
  --text-accent:   var(--blue-700);
  --text-brand:    var(--slate-700);

  /* Surfaces */
  --surface-page:    var(--mist-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--mist-100);
  --surface-raised:  var(--white);
  --surface-inverse: var(--slate-800);
  --surface-brand:   var(--slate-700);
  --surface-accent-soft: var(--blue-100);
  --surface-brand-soft:  var(--slate-50);
  --surface-leaf-soft:   var(--lime-200);

  /* Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--blue-200);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* Focus ring */
  --focus-ring: var(--blue-500);
}