/* ============================================================
   KYNFOLD · COLORS
   Bright, optimistic, warm. Coral leads; amber + teal + berry
   round out a friendly, community-first palette. Neutrals are
   warm-tinted (never cold gray) to keep surfaces cozy.
   ============================================================ */
:root {
  /* --- Brand ramps --- */
  /* Coral — the primary brand color */
  --coral-50:  #FFF1EC;
  --coral-100: #FFDFD3;
  --coral-200: #FFBFA8;
  --coral-300: #FF9B78;
  --coral-400: #FF7852;
  --coral-500: #FF5A36;  /* base */
  --coral-600: #E8431F;
  --coral-700: #BE3315;
  --coral-800: #922814;
  --coral-900: #6E2113;

  /* Amber — warm secondary / highlights */
  --amber-50:  #FFF7E6;
  --amber-100: #FFE9B8;
  --amber-300: #FFCE5C;
  --amber-400: #FFBE33;
  --amber-500: #F7A80B;
  --amber-700: #B87905;

  /* Teal — friendly cool balance */
  --teal-50:   #E7FAF6;
  --teal-100:  #BEF1E7;
  --teal-300:  #57D9C4;
  --teal-500:  #12B3A6;
  --teal-600:  #0C9488;
  --teal-700:  #0A7368;

  /* Berry — playful accent (likes, badges, tags) */
  --berry-50:  #FFEDF4;
  --berry-100: #FFCFE0;
  --berry-300: #FF95BC;
  --berry-500: #FF6FA5;
  --berry-600: #EB4C87;

  /* --- Warm neutrals --- */
  --ink-900: #241C1A;  /* headings, primary text */
  --ink-800: #362B27;
  --ink-700: #4E403A;
  --ink-600: #6B5A52;
  --ink-500: #8B7A71;
  --ink-400: #AC9C93;
  --ink-300: #CFC2BA;
  --ink-200: #E7DDD6;
  --ink-100: #F2EAE3;
  --ink-50:  #FAF5F0;
  --cream:   #FFF9F3;  /* app background */
  --white:   #FFFFFF;

  /* --- Semantic states --- */
  --success-500: #2FA36B;
  --success-50:  #E6F6ED;
  --warning-500: #F7A80B;
  --warning-50:  #FFF4DC;
  --danger-500:  #E5484D;
  --danger-50:   #FCEBEB;
  --info-500:    #3D7BF7;
  --info-50:     #EAF1FE;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */
  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-600);
  --text-subtle:   var(--ink-500);
  --text-on-brand: var(--white);
  --text-link:     var(--coral-600);
  --text-link-hover: var(--coral-700);

  /* Surfaces */
  --surface-app:    var(--cream);
  --surface-card:   var(--white);
  --surface-sunken: var(--ink-50);
  --surface-hover:  var(--ink-100);
  --surface-inverse: var(--ink-900);

  /* Brand */
  --brand:          var(--coral-500);
  --brand-hover:    var(--coral-600);
  --brand-active:   var(--coral-700);
  --brand-subtle:   var(--coral-50);
  --brand-on-subtle: var(--coral-700);

  /* Borders */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-brand:   var(--coral-500);

  /* Focus ring */
  --ring: color-mix(in srgb, var(--coral-500) 45%, transparent);
}