/* ============================================================
   CSS CUSTOM PROPERTIES — EPCIS Event Studio
   ============================================================
   Single source of truth for all design tokens.
   All component CSS must use var(--token) — no raw hex values.
   ============================================================ */

:root {

  /* ── Backgrounds (surface hierarchy: darkest → lightest) ── */
  --color-bg-primary:      #141928;                  /* Page background */
  --color-bg-secondary:    #1f2933;                  /* Header, sidebar, panels */
  --color-bg-tertiary:     rgba(40, 50, 70, 0.5);    /* Cards, inputs, buttons */
  --color-bg-inset:        rgba(20, 25, 40, 0.8);    /* Textareas, deep inset areas */

  /* ── Text ── */
  --color-text-primary:    #e8f1f5;                  /* All primary text */
  --color-text-secondary:  #b8c9d3;                  /* Muted / secondary text, placeholders */
  --color-text-label:      #8899a6;                  /* Form field labels, secondary headings */
  --color-text-hint:       #6b7280;                  /* Hint paragraphs, disabled/locked text */
  --color-text-on-accent:  #ffffff;                  /* Text on solid accent/focus-ring backgrounds */

  /* ── Accent (Teal) ── */
  --color-accent-primary:  #40e0d0;                  /* Borders, active states, icons */
  --color-accent-hover:    #5ffbea;                  /* Hover, focus rings */
  --color-accent-dark:     #20b2aa;                  /* Gradient end, pressed states */
  --color-accent-tint:     rgba(64, 224, 208, 0.1);  /* Subtle hover background fill on accent-bordered elements */
  --color-accent-tint-strong: rgba(64, 224, 208, 0.2); /* Stronger hover/active background fill */
  --color-accent-tint-faint:  rgba(64, 224, 208, 0.04); /* Ultra-subtle panel/toolbar/card resting background */

  /* ── Focus Ring ── */
  --color-focus-ring:           #2563eb;                  /* Keyboard focus outlines, active tab highlight */
  --color-focus-ring-bg:        rgba(37, 99, 235, 0.1);   /* Subtle focus ring background fill */
  --color-focus-ring-halo:      rgba(37, 99, 235, 0.13);  /* Box-shadow halo for keyboard focus rings */
  --color-focus-ring-badge-bg:  rgba(37, 99, 235, 0.3);   /* Badge / chip background — info/default state */
  --color-focus-ring-badge-border: rgba(37, 99, 235, 0.5); /* Badge / chip border — info/default state */
  --color-focus-ring-badge-text: #93c5fd;                 /* Badge / chip text — info/default state */

  /* ── Borders ── */
  --color-border-subtle:   rgba(64, 224, 208, 0.2);  /* Dividers, subtle outlines */
  --color-border:          rgba(64, 224, 208, 0.3);  /* Standard component borders */
  --color-border-hover:    rgba(64, 224, 208, 0.4);  /* Hover border state */

  /* ── Status: Neutral (checking / indeterminate states) ── */
  --color-neutral-tint:    rgba(107, 114, 128, 0.12); /* Checking/indeterminate pill background */
  --color-neutral-border:  rgba(107, 114, 128, 0.3);  /* Checking/indeterminate pill border */

  /* ── Status: Success ── */
  --color-success:         #10b981;
  --color-success-bg:      rgba(16, 185, 129, 0.15);
  --color-success-text:    #6ee7b7;
  --color-success-border:  rgba(16, 185, 129, 0.35);  /* Success pill / indicator border */

  /* ── Status: Error / Danger ── */
  --color-error:           #ef4444;                  /* Base error / danger colour */
  --color-error-hover:     #dc2626;                  /* Danger button hover state */
  --color-error-active:    #b91c1c;                  /* Danger button pressed/active state */
  --color-error-bg:        rgba(239, 68, 68, 0.15);
  --color-error-text:      #fca5a5;
  --color-error-border:    rgba(239, 68, 68, 0.35);   /* Error pill / indicator border */

  /* ── Status: Warning ── */
  --color-warning:         #f59e0b;
  --color-warning-bg:      rgba(245, 158, 11, 0.15);
  --color-warning-text:    #fcd34d;
  --color-warning-border:  rgba(245, 158, 11, 0.35);  /* Warning pill / indicator border */

  /* ── Shadows ── */
  --shadow-accent:         0 4px 15px rgba(64, 224, 208, 0.3);
  --shadow-accent-hover:   0 6px 25px rgba(64, 224, 208, 0.5);
  --shadow-accent-subtle:  0 4px 15px rgba(64, 224, 208, 0.15); /* Lighter accent glow, cards/containers */
  --shadow-neutral-sm:     0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-neutral-md:     0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-error:          0 4px 15px rgba(239, 68, 68, 0.3);   /* Danger button default shadow */
  --shadow-error-hover:    0 6px 25px rgba(239, 68, 68, 0.5);   /* Danger button hover shadow */

  /* ── Modal Overlays ── */
  --color-modal-overlay:      rgba(0, 0, 0, 0.8);   /* Standard modal backdrop */
  --color-modal-overlay-dark: rgba(0, 0, 0, 0.85);  /* Elevated / nested modal backdrop */

  /* ── Spacing (base unit: 0.5rem / 8px) ── */
  --spacing-2xs:  0.35rem;   /*  ~6px — compact input padding (e.g. small form fields) */
  --spacing-xs:   0.25rem;   /*  4px */
  --spacing-sm:   0.5rem;    /*  8px  — base unit */
  --spacing-md:   0.75rem;   /* 12px */
  --spacing-lg:   1rem;      /* 16px */
  --spacing-xl:   1.5rem;    /* 24px */
  --spacing-2xl:  2rem;      /* 32px */

  /* ── Border Radius ── */
  --radius-sm:    8px;       /* Buttons, inputs, small elements */
  --radius-md:    10px;      /* Cards, textareas, output containers */
  --radius-pill:  999px;     /* Chips, badges, step buttons */

  /* ── Transitions ── */
  --transition-fast: 0.3s ease;

  /* ── Typography ── */
  --font-ui:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Cascadia Code', Consolas, monospace;

  /* ── Font Size Scale ── */
  /* All component CSS must reference these tokens — no bare rem values.
     Semantic role guide:
       2xs  — tiny pills, inline metadata only (absolute floor ~11px)
       xs   — hint text, section legend labels, subsection uppercase trackers (12px)
       sm   — field labels, table <th>, all button text (13px)
       base — body text, form inputs, card content (14px)
       lg   — sub-headings, card titles, toolbar headings (16px)
       xl   — modal/section sub-titles, wizard step headings (18px)
       2xl  — admin panel section headings, confirm dialog headings (20px)
       3xl  — primary modal h2, page-level h1/h2 (21px)
  */
  --font-size-2xs:  0.70rem;   /* ~11px — tiny pills, inline metadata            */
  --font-size-xs:   0.75rem;   /*  12px — hint text, legend labels               */
  --font-size-sm:   0.82rem;   /* ~13px — field labels, table th, button text    */
  --font-size-base: 0.875rem;  /*  14px — body text, inputs, card content        */
  --font-size-lg:   1.00rem;   /*  16px — sub-headings, card titles              */
  --font-size-xl:   1.10rem;   /* ~18px — modal/section sub-titles               */
  --font-size-2xl:  1.25rem;   /*  20px — admin/confirm dialog headings          */
  --font-size-3xl:  1.30rem;   /* ~21px — primary modal h2, page h1/h2           */

  /* ── Scrollbars ── */
  /* thumb: semi-transparent teal; track: matches bg-primary; width: 6px */
  --scrollbar-width:        6px;
  --scrollbar-thumb:        rgba(64, 224, 208, 0.35);   /* resting thumb — teal tint */
  --scrollbar-thumb-hover:  rgba(64, 224, 208, 0.6);    /* hovered thumb */
  --scrollbar-track:        rgba(20, 25, 40, 0.6);      /* track — near bg-primary */

}