/* ═══════════════════════════════════════════════════════════
   PlotBuddy — Design tokens (single source of truth)
   Every colour, spacing, radius, shadow and z-index used across
   styles.css / auth.css / component-scoped styles must reference
   a variable from this file. Load this stylesheet first.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --brand-primary:     #0F6E56;
  --brand-dark:        #0A5A45;
  --brand-tint:        #E8F5F0;
  --brand-tint-hover:  #D1F0E4;
  --brand-soft:        rgba(15, 110, 86, 0.10);
  --brand-accent:      #14B8A6;
  --brand-accent-dark: #0F766E;
  --brand-accent-soft: rgba(20, 184, 166, 0.12);
  --brand-disabled-bg: #C7ECE7;

  /* ── Surfaces ── */
  --surface-page:    #F0F4F8;
  --surface-page-alt: #E4EAF1;
  --surface-card:    #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-input:   #FFFFFF;
  --surface-header:  #FFFFFF;
  --surface-rail:    #E9F5F3;
  --surface-sage:    #F0FDF4;
  --surface-hover:   rgba(20, 184, 166, 0.08);
  --surface-active:  rgba(20, 184, 166, 0.15);
  --surface-subtle:  #F8FAFC;
  --surface-subtle-hover: #F1F5F9;
  --surface-neutral-hover: #F3F4F6;

  /* ── Text ── */
  --text-heading:   #0C1A2E;
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6B7280;
  --text-faint:     #9CA3AF;
  --text-brand:     #0F6E56;
  --text-on-brand:  #FFFFFF;

  /* ── Borders ── */
  --border-default: #E5E7EB;
  --border-strong:  #D1D5DB;
  --border-subtle:  rgba(15, 23, 42, 0.06);
  --border-brand:   #0F6E56;
  --border-focus:   rgba(15, 110, 86, 0.30);
  --border-focus-accent: rgba(20, 184, 166, 0.15);

  /* ── Semantic ── */
  --color-danger:       #E24B4A;
  --color-danger-bg:    #FCEBEB;
  --color-danger-border: #F09595;
  --color-danger-text:  #A32D2D;
  --color-warning:      #EF9F27;
  --color-warning-bg:   #FAEEDA;
  --color-warning-text: #854F0B;
  --color-success:      #0F6E56;
  --color-success-bg:   #E8F5F0;
  --color-success-text: #0F6E56;
  --color-danger-tint:  #FFF5F5;

  /* ── Cadre badge palette (assigned by stable hash of cadre code) ── */
  --cadre-0-bg:  #EFF6FF; --cadre-0-text:  #1D4ED8;
  --cadre-1-bg:  #F0FDF4; --cadre-1-text:  #15803D;
  --cadre-2-bg:  #FDF4FF; --cadre-2-text:  #7E22CE;
  --cadre-3-bg:  #FFF7ED; --cadre-3-text:  #C2410C;
  --cadre-4-bg:  #EFF6FF; --cadre-4-text:  #1E40AF;
  --cadre-5-bg:  #ECFDF5; --cadre-5-text:  #065F46;
  --cadre-6-bg:  #FFF1F2; --cadre-6-text:  #BE123C;
  --cadre-7-bg:  #F0FDF4; --cadre-7-text:  #14532D;
  --cadre-8-bg:  #FAF5FF; --cadre-8-text:  #6B21A8;
  --cadre-9-bg:  #FFF8F1; --cadre-9-text:  #92400E;
  --cadre-10-bg: #EEF2FF; --cadre-10-text: #3730A3;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;

  /* ── Radius ── */
  /* NB: --radius-sm is legacy (10px, see aliases below) — kept as-is because
     it's already relied on by inline styles across several views. Use
     --radius-md/lg/xl for new work. */
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:      0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:      0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg:      0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.07);
  --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.10);

  /* ── Typography ── */
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ── Z-index layers ── */
  --z-rail:     1030;
  --z-subnav:   1020;
  --z-appbar:   1040;
  --z-dropdown: 1050;
  --z-modal:    1055;
  --z-loader:   2000;

  /* ── Transitions ── */
  --transition-fast: 0.10s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* ── Layout metrics ── */
  --appbar-h:            52px;
  --subnav-h:            44px;
  --rail-w:              200px;
  --rail-w-collapsed:    60px;

  /* ═══ Legacy aliases — kept so existing view-level inline styles
     and component CSS keep working while everything funnels through
     this single token file. Prefer the canonical names above in new code. ═══ */
  --ink-h:       var(--text-heading);
  --ink:         var(--text-primary);
  --ink-medium:  var(--text-secondary);
  --muted:       var(--text-muted);
  --muted-light: var(--text-faint);
  --line:        var(--border-default);
  --bg1:         var(--surface-page);
  --bg2:         var(--surface-page-alt);
  --rail-bg:     var(--surface-rail);
  --sage-pale:   var(--surface-sage);
  --panel-bg:    var(--surface-card);
  --card-bg:     var(--surface-card);
  --hover-bg:    var(--surface-hover);
  --active-bg:   var(--surface-active);
  --brand:       var(--brand-primary);
  --primary-1:   var(--brand-accent);
  --primary-2:   var(--brand-accent-dark);
  --primary-soft: var(--brand-accent-soft);
  --danger:        var(--color-danger);
  --danger-bg:     var(--color-danger-bg);
  --danger-border: var(--color-danger-border);
  --danger-text:   var(--color-danger-text);
  --shadow:      var(--shadow-lg);
  --shadow-card: var(--shadow-md);
  --radius:      var(--radius-2xl);
  --radius-card-sm: 10px;
  --radius-sm:   var(--radius-card-sm);
  --card-accent: 3px solid var(--brand-accent);
}

/* Global resets */
* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brand checkbox */
input[type="checkbox"] {
  accent-color: var(--brand-accent);
  cursor: pointer;
}