/* ==========================================================================
   HALIDRA — Safelight Color System
   Version 1.0 · September 2026
   Dark mode is the default; Light is an opt-in via [data-theme="light"]
   on <html> or <body>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOW TO USE
   --------------------------------------------------------------------------
   1. Import this file once in your main renderer stylesheet:
        @import './halidra-colors.css';

   2. Use tokens everywhere — never hard-code a hex:
        color: var(--text-primary);
        background: var(--surface);
        border: 1px solid var(--border);

   3. To switch to light mode, set the attribute on <html>:
        document.documentElement.setAttribute('data-theme', 'light');

   4. To restore dark mode, remove it:
        document.documentElement.removeAttribute('data-theme');

   For runtime theme management, pair this file with halidra-theme.js.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   DARK — default (no attribute required)
   ========================================================================== */
:root {

  /* ── Canvas / background ─────────────────────────────────────────────── */
  --canvas:            #0c0c0c;   /* Page & viewport ground                  */
  --surface:           #111111;   /* Panels, sidebars, floating cards        */
  --surface-raised:    #1a1a1a;   /* Hover state for panels; raised elements */
  --surface-overlay:   #1f1f1f;   /* Tooltips, context menus                 */
  --surface-inset:     #080808;   /* Inset wells, sunken inputs              */

  /* ── Borders / dividers ──────────────────────────────────────────────── */
  --border:            #1e1e1e;   /* Default separator                       */
  --border-strong:     #2a2a2a;   /* Visible rule / focus ring container     */
  --border-subtle:     #161616;   /* Very quiet hairline                     */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:      #ebebeb;   /* Headings, active labels, primary copy   */
  --text-secondary:    #888888;   /* Body copy, subtitles, descriptions      */
  --text-dim:          #555555;   /* Placeholders, disabled, metadata        */
  --text-inverse:      #0c0c0c;   /* Text on brand-coloured surfaces         */

  /* ── Brand — Safelight crimson ──────────────────────────────────────── */
  --brand:             #9b2c2c;   /* Primary accent — active states, rules   */
  --brand-hover:       #b03333;   /* Hover on a brand element                */
  --brand-dark:        #6a1515;   /* Pressed / deep shadow on brand          */
  --brand-dim:         #3a1818;   /* Active-nav chip, alert background       */
  --brand-ghost:       #1a0808;   /* Faint red tint — hover on dark canvas   */
  --brand-text:        #d97070;   /* Readable crimson on dark surfaces       */

  /* ── Status ──────────────────────────────────────────────────────────── */
  --status-ok:         #3a7a4a;
  --status-ok-text:    #6dbb82;
  --status-warn:       #7a5e1a;
  --status-warn-text:  #c9a040;
  --status-error:      var(--brand);
  --status-error-text: var(--brand-text);
  --status-info:       #1a3a5e;
  --status-info-text:  #5595d0;

  /* ── Overlay & shadow ────────────────────────────────────────────────── */
  --scrim:             rgba(0, 0, 0, 0.72);
  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md:         0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg:         0 12px 40px rgba(0, 0, 0, 0.72);

  /* ── Safelight glow (brand ambient) ─────────────────────────────────── */
  --glow-brand:        rgba(155, 44, 44, 0.22);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display:      'Barlow Condensed', system-ui, sans-serif;
  --font-body:         'Crimson Pro', Georgia, serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing scale (4-pt grid) ───────────────────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Border radius (Halidra is a square system) ─────────────────────── */
  --radius-none:  0px;   /* Default — no rounding on containers            */
  --radius-sm:    2px;   /* Pill badges and focus rings only               */

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   350ms ease;

  /* ── Z-index ladder ──────────────────────────────────────────────────── */
  --z-base:      0;
  --z-raised:   10;
  --z-sticky:   20;
  --z-dropdown: 100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-top:      900;
}


/* ==========================================================================
   LIGHT — opt-in via [data-theme="light"]
   ========================================================================== */
[data-theme="light"] {

  /* ── Canvas / background ─────────────────────────────────────────────── */
  --canvas:            #f5f3f0;
  --surface:           #ffffff;
  --surface-raised:    #f0ede8;
  --surface-overlay:   #faf8f6;
  --surface-inset:     #eae7e2;

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border:            #e0dbd5;
  --border-strong:     #c8c2bb;
  --border-subtle:     #ede9e4;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:      #1a1612;
  --text-secondary:    #6b5f5a;
  --text-dim:          #a09088;
  --text-inverse:      #f5f3f0;

  /* ── Brand — same crimson, different surfaces ────────────────────────── */
  --brand:             #9b2c2c;
  --brand-hover:       #b03333;
  --brand-dark:        #6a1515;
  --brand-dim:         #fce8e8;
  --brand-ghost:       #fef5f5;
  --brand-text:        #7a1c1c;

  /* ── Status ──────────────────────────────────────────────────────────── */
  --status-ok:         #d4edda;
  --status-ok-text:    #2a6037;
  --status-warn:       #fff3cd;
  --status-warn-text:  #7a5e1a;
  --status-error:      #fce8e8;
  --status-error-text: var(--brand-text);
  --status-info:       #dbeafe;
  --status-info-text:  #1e4a8a;

  /* ── Overlay & shadow ────────────────────────────────────────────────── */
  --scrim:             rgba(26, 22, 18, 0.6);
  --shadow-sm:         0 1px 3px rgba(26, 22, 18, 0.12);
  --shadow-md:         0 4px 16px rgba(26, 22, 18, 0.12);
  --shadow-lg:         0 12px 40px rgba(26, 22, 18, 0.18);

  /* ── Safelight glow ──────────────────────────────────────────────────── */
  --glow-brand:        rgba(155, 44, 44, 0.10);
}


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text color utilities */
.text-primary   { color: var(--text-primary);   }
.text-secondary { color: var(--text-secondary); }
.text-dim       { color: var(--text-dim);       }
.text-brand     { color: var(--brand);          }
.text-brand-readable { color: var(--brand-text); }

/* Background utilities */
.bg-canvas   { background: var(--canvas);   }
.bg-surface  { background: var(--surface);  }
.bg-brand    { background: var(--brand);    }
.bg-brand-dim{ background: var(--brand-dim);}

/* Border utilities */
.border-default { border: 1px solid var(--border);       }
.border-strong  { border: 1px solid var(--border-strong); }
.border-brand   { border: 1px solid var(--brand);         }

/* Status chips */
.chip-ok    { background: var(--status-ok);    color: var(--status-ok-text);    }
.chip-warn  { background: var(--status-warn);  color: var(--status-warn-text);  }
.chip-error { background: var(--status-error); color: var(--status-error-text); }
.chip-info  { background: var(--status-info);  color: var(--status-info-text);  }