/* ============================================================
   AKARI Inc. design tokens (colors, type), as in Lantern's
   app/assets/stylesheets/tokens.css. Fonts ship from public/fonts.
   Dark values apply when the system asks for dark.
   ============================================================ */

@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora-VariableFont_wght.ttf") format("truetype-variations"),
       url("/fonts/Sora-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("/fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --akari-indigo:  #615fff;
  --akari-teal:    #17b3a6;

  --violet-50:   #faf9ff;
  --violet-100:  #f3f1fb;
  --violet-150:  #eceaf5;
  --violet-200:  #ddd9ec;
  --violet-300:  #bcb6d4;
  --violet-400:  #8e88a8;
  --violet-500:  #6d6887;
  --violet-600:  #504c66;
  --violet-700:  #393649;
  --violet-800:  #232133;
  --violet-900:  #15131f;
  --violet-950:  #0b0a12;

  --bg:            var(--violet-50);
  --bg-raised:     #ffffff;
  --bg-sunken:     var(--violet-100);

  --fg:            var(--violet-950);
  --fg-1:          var(--violet-800);
  --fg-2:          var(--violet-600);

  --border:        var(--violet-200);
  --border-strong: var(--violet-300);

  --accent:         var(--akari-indigo);
  --accent-hover:   #524fe8;
  --accent-press:   #4340c7;
  --accent-soft-fg: #3c3ac0;
  --on-accent:      #ffffff;

  --success-ink:   #1d6b4c;
  --success-soft:  #dcf2e8;
  --danger-ink:    #a3293a;
  --danger-soft:   #fbe2e4;

  --focus: color-mix(in oklch, var(--akari-indigo) 45%, transparent);

  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            var(--violet-950);
    --bg-raised:     var(--violet-900);
    --bg-sunken:     #08070f;

    --fg:            #f7f5ff;
    --fg-1:          var(--violet-100);
    --fg-2:          var(--violet-300);

    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.24);

    --accent:         #8380ff;
    --accent-hover:   #9694ff;
    --accent-press:   #a9a7ff;
    --accent-soft-fg: #b5b3ff;
    --on-accent:      var(--violet-950);

    --success-ink:   #8fe0bd;
    --success-soft:  rgba(46, 158, 114, 0.18);
    --danger-ink:    #f4a7b1;
    --danger-soft:   rgba(209, 70, 88, 0.18);
  }
}