/* ============================================================
   Gonka.Top — Color tokens
   Light base, deep-violet AI accent. The choice is deliberate:
   most DePIN projects use dark/neon "crypto" themes — the light
   violet palette pulls Gonka.Top toward premium AI infra
   (Anthropic, Together AI) and builds trust with funds.
   ============================================================ */

:root {
  /* ---- Base palette: Violet (the AI nerve) ---- */
  --violet-25:  #FAF9FE;   /* lightest tint — faint violet wash */
  --violet-50:  #F3F1FC;
  --violet-100: #E7E3F8;
  --violet-200: #D2CAF2;
  --violet-300: #B3A6EA;
  --violet-400: #9484E2;
  --violet-500: #7E6FE5;   /* accent-2 / hover-light */
  --violet-600: #6B5BD9;   /* PRIMARY accent */
  --violet-700: #5848C2;   /* accent-text / accent-hover (on light) */
  --violet-800: #483AA0;
  --violet-900: #2F2667;
  --violet-950: #201A45;   /* deep violet — dark surfaces */
  --violet-1000: #15112C;  /* near-black violet (not pure black) */

  /* ---- Base palette: Neutral (cool ink) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFCFE;
  --neutral-50:  #F7F7FA;
  --neutral-100: #EFEFF4;
  --neutral-200: #E4E4EC;
  --neutral-300: #C9C9D6;
  --neutral-400: #A6A6B6;
  --neutral-500: #7C7C8C;
  --neutral-600: #4A4A5A;
  --neutral-900: #0E0E1A;

  /* ---- Base palette: Semantic hues ---- */
  --green-500:  #10B981;
  --orange-500: #E8804A;

  /* =========================================================
     SEMANTIC ALIASES  (the component-facing API)
     These names match the production codebase 1:1.
     ========================================================= */

  /* Surfaces — light → progressively deeper */
  --bg:       var(--neutral-0);    /* page background */
  --bg-2:     var(--neutral-50);   /* alternating sections */
  --bg-3:     var(--neutral-100);  /* chips, nested fills */
  --bg-light: var(--neutral-0);
  --surface:  var(--neutral-25);   /* raised cards */

  /* Borders — hairline → emphasized */
  --border:   var(--neutral-200);
  --border-2: var(--neutral-300);

  /* Text — ink → muted → faint */
  --text:      var(--neutral-900);
  --text-2:    var(--neutral-600);
  --text-3:    var(--neutral-500);
  --text-dark: var(--neutral-900);

  /* Accent — deep violet. On light themes the accent is dark,
     so WHITE sits on accent fills (contrast 5–7:1, WCAG AA). */
  --accent:       var(--violet-600);
  --accent-2:     var(--violet-500);
  --accent-hover: var(--violet-700);
  --accent-text:  var(--violet-700);   /* accent used as TEXT/links on white */
  --on-accent:    #FFFFFF;             /* text/icons on an accent fill */
  --accent-soft:  rgba(107, 91, 217, 0.10);
  --accent-rgb:   107, 91, 217;        /* @kind other */

  /* Status */
  --success: var(--green-500);
  --warning: var(--orange-500);
}