/* ============================================================
   Qanapi — Color tokens
   Source: Qanapi Brand Presentation, "02 Color Palette"
   ============================================================ */

:root {
  /* ---- Brand primaries ---- */
  --qan-green:    #08A046;  /* Primary. The "water/flow" energy color */
  --qan-charcoal: #232C32;  /* Primary. Core dark / near-black text & surfaces */

  /* ---- Secondaries ---- */
  --qan-teal:  #0E8A98;
  --qan-navy:  #1B4D6B;
  --qan-sand:  #E9D8B0;
  --qan-slate: #909BA1;

  /* ---- Tertiaries (used sparingly; muted earthy semantics) ---- */
  --qan-sage:    #7DCAA0;  /* soft success / positive accent */
  --qan-flame:   #E25A16;  /* warning / emphasis — deliberately NOT bright red */
  --qan-crimson: #B53930;  /* error / critical — muted, earthy */

  /* ---- Neutral ramp (derived from charcoal → white) ---- */
  --qan-ink-900: #161D21;
  --qan-ink-800: #232C32;  /* = charcoal */
  --qan-ink-700: #333E45;
  --qan-ink-600: #4A565E;
  --qan-ink-500: #647179;
  --qan-ink-400: #909BA1;  /* = slate */
  --qan-ink-300: #B7BFC3;
  --qan-ink-200: #D7DCDF;
  --qan-ink-100: #EBEEEF;
  --qan-ink-50:  #F5F7F7;
  --qan-white:   #FFFFFF;

  /* ---- Tints (surfaces & washes) ---- */
  --qan-green-tint: #E6F5EC;
  --qan-teal-tint:  #E2F0F2;
  --qan-navy-tint:  #E4ECF1;
  --qan-sand-tint:  #F7F0DF;
  --qan-flame-tint: #FBE9DF;
  --qan-crimson-tint:#F7E5E3;

  /* ---- Gradients ---- */
  /* Brand: Green > Teal — primary energy, "flow" */
  --qan-grad-brand:   linear-gradient(120deg, #08A046 0%, #0E8A98 100%); /* @kind color */
  /* Logo: Teal > Navy — the bug / mark gradient */
  --qan-grad-logo:    linear-gradient(120deg, #0E8A98 0%, #1B4D6B 100%); /* @kind color */
  /* Product / "Full Color": the full spectrum sweep */
  --qan-grad-product: linear-gradient(120deg, #08A046 0%, #0E8A98 45%, #1B4D6B 100%); /* @kind color */
  /* Depth wash for dark, tech-forward imagery overlays */
  --qan-grad-depth:   linear-gradient(180deg, rgba(35,44,50,0) 0%, rgba(22,29,33,0.92) 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — reference these in components, not raw hues
     ============================================================ */

  /* Text */
  --text-strong:  var(--qan-ink-900);
  --text-body:    var(--qan-ink-800);
  --text-muted:   var(--qan-ink-500);
  --text-subtle:  var(--qan-ink-400);
  --text-inverse: var(--qan-white);
  --text-brand:   var(--qan-green);
  --text-link:    var(--qan-teal);

  /* Surfaces */
  --surface-page:    var(--qan-ink-50);
  --surface-card:    var(--qan-white);
  --surface-sunken:  var(--qan-ink-100);
  --surface-inverse: var(--qan-charcoal);
  --surface-brand:   var(--qan-green);

  /* Borders / lines */
  --border-subtle:  var(--qan-ink-200);
  --border-default: var(--qan-ink-300);
  --border-strong:  var(--qan-ink-400);
  --border-brand:   var(--qan-green);

  /* Interactive (primary action = brand green) */
  --action-bg:          var(--qan-green);
  --action-bg-hover:    #068a3c;
  --action-bg-active:   #057433;
  --action-fg:          var(--qan-white);
  --focus-ring:         color-mix(in srgb, var(--qan-teal) 55%, transparent);

  /* Status — muted, earthy (brand-intentional) */
  --status-success:    var(--qan-green);
  --status-success-soft:var(--qan-green-tint);
  --status-info:       var(--qan-teal);
  --status-info-soft:  var(--qan-teal-tint);
  --status-warning:    var(--qan-flame);
  --status-warning-soft:var(--qan-flame-tint);
  --status-danger:     var(--qan-crimson);
  --status-danger-soft:var(--qan-crimson-tint);
}