/* Arkum Labs — Color Tokens
   Dark-mode-first. Mostly black, charcoal, graphite, soft white.
   Accent cyan used sparingly; violet is an optional secondary accent. */

:root {
  /* ---- Base palette (raw values) ---- */
  --ark-black:        #060709; /* base black — page void */
  --ark-charcoal:     #0C0E12; /* deep charcoal — primary panels */
  --ark-graphite:     #131720; /* graphite — cards, raised surfaces */
  --ark-graphite-2:   #1A1F29; /* elevated graphite — popovers, modals */
  --ark-graphite-3:   #222834; /* highest elevation / hover fills */

  --ark-line-subtle:  #1B2029; /* hairline dividers on dark */
  --ark-line:         #29313C; /* default 1px borders */
  --ark-line-strong:  #3A434F; /* emphasized borders, focus rings base */

  --ark-white:        #F5F8FC; /* soft white — primary text / inverse bg */
  --ark-gray-100:     #D6DBE3;
  --ark-gray-300:     #AAB2BF;
  --ark-gray-500:     #828B98; /* muted gray — secondary text */
  --ark-gray-700:     #565E6B; /* faint gray — tertiary text, disabled */
  --ark-gray-900:     #353C46;

  /* ---- Accent: cyan (the "light slit") ---- */
  --ark-cyan:         #34E2D0;
  --ark-cyan-bright:  #5FF3E5; /* glow highlight only */
  --ark-cyan-dim:     #18A99A; /* pressed / lower-energy cyan */
  --ark-cyan-deep:    #0B4842; /* tinted fills, 1-color backgrounds */

  /* ---- Accent: violet (optional secondary) ---- */
  --ark-violet:       #8B7DF6;
  --ark-violet-dim:   #5C50C6;
  --ark-violet-deep:  #2A2553;

  /* ---- Semantic hues ---- */
  --ark-success:      #3FD98C;
  --ark-warning:      #E8B45C;
  --ark-danger:       #F0635C;
  --ark-success-deep: #0E3D2A;
  --ark-warning-deep: #3D2F12;
  --ark-danger-deep:  #3D1715;

  /* ---- Semantic aliases (use these in components) ---- */
  --surface-void:     var(--ark-black);
  --surface-base:     var(--ark-charcoal);
  --surface-panel:    var(--ark-charcoal);
  --surface-card:     var(--ark-graphite);
  --surface-raised:   var(--ark-graphite-2);
  --surface-overlay:  var(--ark-graphite-2);
  --surface-hover:    var(--ark-graphite-3);
  --surface-inset:    #0A0C10; /* inputs, wells, terminals */

  --border-subtle:    var(--ark-line-subtle);
  --border-default:   var(--ark-line);
  --border-strong:    var(--ark-line-strong);

  --text-strong:      var(--ark-white);
  --text-default:     var(--ark-gray-100);
  --text-muted:       var(--ark-gray-500);
  --text-faint:       var(--ark-gray-700);
  --text-inverse:     var(--ark-black);
  --text-accent:      var(--ark-cyan);

  --accent:           var(--ark-cyan);
  --accent-hover:     var(--ark-cyan-bright);
  --accent-press:     var(--ark-cyan-dim);
  --accent-tint:      var(--ark-cyan-deep);
  --accent-2:         var(--ark-violet);

  --focus-ring:       color-mix(in oklab, var(--ark-cyan) 55%, transparent);

  /* Scrim for modal/overlay backdrops */
  --scrim:            color-mix(in oklab, var(--ark-black) 72%, transparent);
}