/* ============================================================
   Fareon — Color tokens
   Source: HMN003 Fareon Identity (Nonfiction LLC, 2025)
   "Color Palette 7" — Pantone-matched.
   ============================================================ */

:root {
  /* ---- Brand raw palette ---------------------------------- */
  /* Primary — foundation of the identity */
  --fareon-oxford:      #031D44; /* Oxford Blue · PANTONE 282 C */
  --fareon-mint:        #7EFED6; /* Mint · PANTONE 3245 C */

  /* Secondary — expansion of the visual language */
  --fareon-humanity:    #283891; /* Humanity Blue · PANTONE 2370 C */
  --fareon-cornflower:  #8094DD; /* Cornflower · PANTONE 7452 C */
  --fareon-periwinkle:  #ABBDEF; /* Periwinkle · PANTONE 2717 C */

  /* Tertiary — accents & atmosphere */
  --fareon-teal:        #02F8C4; /* Bright Teal · PANTONE 3265 C */
  --fareon-aluminum:    #C4C4C4; /* Aluminum · PANTONE 10102 C */

  /* Brand neutral — the warm "bone" canvas of the brand system */
  --fareon-bone:        #E0D6CD;

  /* ---- Oxford tint ramp (navy darks) ---------------------- */
  --oxford-900: #020f24;
  --oxford-800: #031D44; /* base */
  --oxford-700: #0a2c5c;
  --oxford-600: #143a72;
  --oxford-500: #283891; /* humanity blue sits here */

  /* ---- Cool neutral ramp (cards, lines, UI chrome) -------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7fb;
  --neutral-100: #eef0f7;
  --neutral-200: #e0e3ef;
  --neutral-300: #ccd2e6;
  --neutral-400: #a7afc9;
  --neutral-500: #7d86a3;
  --neutral-600: #565f7d;
  --neutral-700: #3a4159;
  --neutral-800: #232a40;
  --neutral-900: #131a2e;

  /* ---- Warm neutral ramp (bone / print surfaces) ---------- */
  --bone-50:  #f6f1ea;
  --bone-100: #efe8df;
  --bone-200: #e0d6cd; /* base bone */
  --bone-300: #cfc3b5;

  /* ---- Semantic status ------------------------------------ */
  --status-positive: #02F8C4; /* uses teal — "repair / up" */
  --status-info:     #8094DD; /* cornflower */
  --status-warning:  #f2b441;
  --status-critical: #e5604d;

  /* =========================================================
     Semantic aliases — reference these in components
     ========================================================= */

  /* Surfaces */
  --surface-base:      var(--fareon-bone);   /* default brand canvas */
  --surface-page:      var(--neutral-50);    /* app/product page bg */
  --surface-card:      var(--neutral-0);
  --surface-raised:    var(--neutral-0);
  --surface-sunken:    var(--neutral-100);
  --surface-inverse:   var(--fareon-oxford); /* dark mode / hero */
  --surface-brand:     var(--fareon-oxford);
  --surface-accent:    var(--fareon-mint);

  /* Text */
  --text-strong:   var(--fareon-oxford);
  --text-body:     #1d2740;
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-inverse:  #ffffff;
  --text-on-mint:  var(--fareon-oxford);
  --text-link:     var(--fareon-humanity);

  /* Borders & lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-inverse: rgba(255,255,255,0.16);

  /* Interactive / accent */
  --accent:           var(--fareon-humanity);
  --accent-hover:     #1e2c78;
  --accent-press:     #182360;
  --accent-contrast:  #ffffff;
  --accent-mint:      var(--fareon-mint);
  --accent-teal:      var(--fareon-teal);

  /* Focus ring */
  --focus-ring: var(--fareon-cornflower);
}