/*
  DOU Journal — Design Tokens
  Mirror of the Tailwind palette in tailwind.config.js.
  Use these when you need a color value outside of a Tailwind utility class
  (inline styles, canvas drawing, third-party widgets, etc.)

  Usage in HTML:  style="background: var(--color-green);"
  Usage in CSS:   color: var(--color-purple-400);
*/

:root {
  /* ── Base ─────────────────────────────────────────────── */
  --color-white:   #ffffff;
  --color-black:   #0a0a0a;

  /* ── Green (light, fresh) ────────────────────────────── */
  --color-green-50:  #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green:     #4ade80;   /* default / 400 */
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;

  /* ── Purple (soft, accent) ───────────────────────────── */
  --color-purple-50:  #f5f3ff;
  --color-purple-100: #ede9fe;
  --color-purple-200: #ddd6fe;
  --color-purple-300: #c4b5fd;
  --color-purple:     #a78bfa;  /* default / 400 */
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;
  --color-purple-700: #6d28d9;
  --color-purple-800: #5b21b6;
  --color-purple-900: #4c1d95;

  /* ── Neutral (near-black text, white bg) ─────────────── */
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #0a0a0a;

  /* ── Semantic aliases ────────────────────────────────── */
  --color-bg:           var(--color-white);
  --color-surface:      var(--color-neutral-50);
  --color-border:       var(--color-neutral-200);

  --color-text:         var(--color-black);
  --color-text-muted:   var(--color-neutral-500);
  --color-text-subtle:  var(--color-neutral-400);

  /* Primary action — black button */
  --color-btn-primary:        var(--color-black);
  --color-btn-primary-text:   var(--color-white);
  --color-btn-primary-hover:  var(--color-neutral-800);

  /* Green accent — tags, badges, highlights */
  --color-accent-green:       var(--color-green);
  --color-accent-green-soft:  var(--color-green-100);
  --color-accent-green-text:  var(--color-green-700);

  /* Purple accent — labels, links, decorative */
  --color-accent-purple:      var(--color-purple);
  --color-accent-purple-soft: var(--color-purple-100);
  --color-accent-purple-text: var(--color-purple-700);
}