/* ============================================
   BVJ CRM - Design Tokens
   Loaded on every CRM page including the editor.
   Referenced by both crm.css and editor.css.
   ============================================ */

:root {
    --crm-sidebar-width:  230px;
    --crm-sidebar-rail-width:  54px;
    --crm-sidebar-panel-width: calc(var(--crm-sidebar-width) - var(--crm-sidebar-rail-width));
    --crm-topbar-height:  56px;

    /* Core colours */
    --crm-colour-transparent:    transparent;
    --crm-colour-white:          hsl(0 0% 100%);
    --crm-colour-black:          hsl(0 0% 0%);
    --crm-colour-bg:             hsl(213 50% 6%);
    --crm-colour-surface:        hsl(213 40% 18%);
    --crm-colour-surface-raised: hsl(210 50% 13%);
    --crm-colour-sidebar:        hsl(214 57% 5%);
    --crm-colour-text:           hsl(216 33% 90%);
    --crm-colour-text-muted:     hsl(214 11% 54%);

    /* Accent colours */
    --crm-colour-primary:        hsl(167 100% 39%);
    --crm-colour-primary-hover:  hsl(167 100% 45%);
    --crm-colour-secondary:      hsl(197 89% 48%);
    --crm-colour-secondary-hover:hsl(199 93% 60%);
    --crm-colour-success-tint:   hsl(168 71% 67%);
    --crm-colour-success-strong: hsl(167 80% 78%);
    --crm-colour-info:           hsl(217 91% 68%);
    --crm-colour-info-tint:      hsl(214 95% 93%);
    --crm-colour-warning:        hsl(45 97% 64%);
    --crm-colour-warning-accent: hsl(38 92% 50%);
    --crm-colour-error:          hsl(0 91% 71%);
    --crm-colour-error-soft:     hsl(0 93% 81%);
    --crm-colour-nav-active:     hsl(169 100% 42%);

    /* Preview colours */
    --crm-preview-paper:         hsl(40 34% 86%);
    --crm-preview-slate-950:     hsl(216 49% 8%);
    --crm-preview-slate-50:      hsl(210 40% 98%);
    --crm-preview-gold:          hsl(40 34% 74%);
    --crm-preview-ink:           hsl(180 19% 18%);
    --crm-preview-moss:          hsl(79 16% 48%);
    --crm-preview-deep:          hsl(180 20% 21%);

    /* Backgrounds */
    --crm-gradient-app:          linear-gradient(
        160deg,
        hsl(214 52% 7%) 0%,
        hsl(212 54% 5%) 55%,
        hsl(160 40% 4%) 100%
    );
    --crm-colour-layer-login:    hsl(211 51% 10% / 90%);
    --crm-colour-layer-autocomplete: hsl(213 49% 8% / 98%);
    --crm-colour-layer-tooltip:  hsl(214 55% 6% / 96%);
    --crm-colour-layer-dialog:   hsl(214 50% 6% / 98%);
    --crm-colour-layer-sheet:    hsl(214 46% 8% / 98%);
    --crm-colour-overlay-panel:  hsl(212 37% 15% / 48%);
    --crm-colour-overlay-backdrop: hsl(from var(--crm-colour-black) h s l / 72%);
    --crm-colour-overlay-backdrop-soft: hsl(213 80% 4% / 72%);

    /* Shared semantic helpers */
    --crm-colour-border:         hsl(from var(--crm-colour-white) h s l / 8%);
    --crm-colour-border-strong:  hsl(from var(--crm-colour-white) h s l / 14%);
    --crm-colour-nav-hover:      hsl(from var(--crm-colour-white) h s l / 5%);
    --crm-colour-nav-active-bg:  hsl(from var(--crm-colour-nav-active) h s l / 10%);
    --crm-colour-error-bg:       hsl(from var(--crm-colour-error) h s l / 10%);

    --crm-gradient-primary:      linear-gradient(135deg, var(--crm-colour-primary) 0%, var(--crm-colour-secondary) 100%);
    --crm-gradient-primary-hover:linear-gradient(135deg, var(--crm-colour-primary-hover) 0%, var(--crm-colour-secondary-hover) 100%);
    --crm-glow-primary:          0 0 20px hsl(from var(--crm-colour-primary) h s l / 28%);
    --crm-glow-primary-hover:    0 0 32px hsl(from var(--crm-colour-primary) h s l / 42%);

    --crm-preview-hero-background:
        radial-gradient(circle at 20% 20%, hsl(from var(--crm-preview-moss) h s l / 22%), transparent 28%),
        linear-gradient(135deg, hsl(from var(--crm-preview-deep) h s l / 18%), hsl(from var(--crm-colour-white) h s l / 10%)),
        var(--crm-preview-gold);

    --crm-radius:    6px;
    --crm-shadow-sm: 0 1px 4px hsl(from var(--crm-colour-black) h s l / 30%);
    --crm-shadow-md: 0 8px 32px hsl(from var(--crm-colour-black) h s l / 45%);

    --crm-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --crm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}