/* octo-core/assets/css/octo-tokens.css
   OCTO.ONE – Single Theme (Dark only)
   Single Source of Truth – no other colors allowed
*/

.octo-app {
  /* =========================================================
     Brand
  ========================================================= */
  --wr-primary: #6D5AE6;
  --wr-text-on-primary: #ffffff;

  /* Brand transparencies (avoid ad-hoc rgba outside tokens) */
  --wr-primary-04: rgba(109, 90, 230, 0.04);
  --wr-primary-08: rgba(109, 90, 230, 0.08);
  --wr-primary-12: rgba(109, 90, 230, 0.12);
  --wr-primary-16: rgba(109, 90, 230, 0.16);
  --wr-primary-24: rgba(109, 90, 230, 0.24);
  --wr-primary-32: rgba(109, 90, 230, 0.32);

  /* =========================================================
     Backgrounds / Surfaces
  ========================================================= */
  --wr-bg: #0F1115;          /* page background */
  --wr-surface: #171A21;     /* cards, inputs */
  --wr-surface-2: #1E2230;   /* elevated / kpi / header rows */
  --wr-surface-3: #23283A;   /* optional: heavier elevated */

  /* =========================================================
     Text
  ========================================================= */
  --wr-text: #EDEFF4;
  --wr-text-muted: #9AA1B2;
  --wr-text-disabled: #6B7280;

  /* =========================================================
     Borders / Dividers
  ========================================================= */
  --wr-border: #2A2E3A;
  --wr-border-hover: #3A3F55;
  --wr-divider: rgba(237, 239, 244, 0.08);

  /* =========================================================
     Status
  ========================================================= */
  --wr-success: #22C55E;
  --wr-warning: #FACC15;
  --wr-danger:  #EF4444;
  --wr-info:    #38BDF8;

  /* Status transparencies */
  --wr-success-12: rgba(34, 197, 94, 0.12);
  --wr-warning-12: rgba(250, 204, 21, 0.12);
  --wr-danger-12:  rgba(239, 68, 68, 0.12);
  --wr-info-12:    rgba(56, 189, 248, 0.12);

  /* =========================================================
     Spacing scale
  ========================================================= */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* =========================================================
     Radius
  ========================================================= */
  --radius-card: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;

  /* =========================================================
     Typography (optional tokens; keep minimal)
  ========================================================= */
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  --line-height-sm: 1.25;
  --line-height-md: 1.4;
  --line-height-lg: 1.5;

  /* =========================================================
     Module Header (unified across all modules)
  ========================================================= */
  --module-header-padding-y: 32px;
  --module-header-padding-x: 24px;
  --module-header-gap: 16px;

  --module-title-font-size: 24px;
  --module-title-font-weight: 700;
  --module-title-color: var(--wr-text);
  --module-title-transform: uppercase;
  --module-title-spacing: 1px;
  --module-title-line-height: 1.2;

  --module-subtitle-font-size: 14px;
  --module-subtitle-color: var(--wr-text-muted);
  --module-subtitle-line-height: 1.4;

  /* =========================================================
     Shadows (subtle, dark-friendly)
  ========================================================= */
  --shadow-sm: 0 1px 0 rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 60px rgba(0,0,0,0.45);

  /* =========================================================
     Inputs
  ========================================================= */
  --input-height: 44px;
  --input-padding-x: 12px;
  --input-padding-right-icon: 44px;

  --input-bg: var(--wr-surface);
  --input-border: var(--wr-border);
  --input-border-hover: var(--wr-border-hover);

  --input-focus-border: var(--wr-primary);
  --input-glow: 0 0 0 2px var(--wr-primary-24);

  /* =========================================================
     Buttons
  ========================================================= */
  --btn-height: 44px;
  --btn-radius: 12px;
  --btn-padding-x: 18px;

  --btn-primary-bg: var(--wr-primary);
  --btn-primary-text: var(--wr-text-on-primary);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--wr-border);
  --btn-secondary-text: var(--wr-text);

  --btn-danger-bg: var(--wr-danger);
  --btn-danger-text: #ffffff;

  /* =========================================================
     Icon Buttons
  ========================================================= */
  --icon-btn-size: 36px;
  --icon-btn-radius: 6px;
  --icon-btn-padding: 6px;
  --icon-btn-icon-size: 16px;

  --icon-btn-bg: transparent;
  --icon-btn-border: var(--wr-border);
  --icon-btn-color: var(--wr-text-muted);

  --icon-btn-hover-bg: var(--wr-surface-2);
  --icon-btn-hover-border: var(--wr-primary);
  --icon-btn-hover-color: var(--wr-primary);

  --icon-btn-danger-color: var(--wr-danger);
  --icon-btn-danger-hover-bg: var(--wr-danger-12);
  --icon-btn-danger-hover-border: var(--wr-danger);

  --icon-btn-inactive-color: var(--wr-warning);
  --icon-btn-inactive-border: var(--wr-warning);
  --icon-btn-inactive-hover-bg: var(--wr-warning-12);

  /* =========================================================
     Tables
  ========================================================= */
  --table-bg: var(--wr-surface);
  --table-head-bg: var(--wr-surface-2);
  --table-row-hover: var(--wr-primary-08);

  /* =========================================================
     Modal
  ========================================================= */
  --wr-modal-width: 1000px;
  --wr-modal-max-width: 95vw;
  --wr-modal-max-height: calc(100vh - 160px);

  --wr-modal-pad-top: 96px;
  --wr-modal-pad-bottom: 32px;
  --wr-modal-pad-x: 16px;

  --wr-modal-header-pad-y: 20px;
  --wr-modal-footer-pad-y: 16px;
  --wr-modal-pad-inner-x: 24px;
  --wr-modal-body-pad: 24px;

  /* Overlay / backdrop */
  --wr-overlay-bg: rgba(0, 0, 0, 0.55);
  --wr-overlay-blur: 6px;

  /* Z-index levels (Divi-safe) */
  --z-tooltip: 1000000;
  --z-modal: 1000000;
  --z-overlay: 999999;

  /* =========================================================
     Misc
  ========================================================= */
  --focus-ring: var(--input-glow);
  --danger-ring: 0 0 0 2px var(--wr-danger-12);

  /* =========================================================
     Mobile Renderer / Tokenized Cards
  ========================================================= */
  --octo-breakpoint-mobile: 1024px;

  --octo-card-radius: var(--radius-card);
  --octo-card-padding: var(--space-16);
  --octo-card-gap: var(--space-12);

  --octo-kpi-primary-size: var(--font-size-lg);
  --octo-kpi-secondary-size: var(--font-size-sm);

  --octo-color-positive: var(--wr-success);
  --octo-color-negative: var(--wr-danger);
  --octo-color-warning: var(--wr-warning);
  --octo-color-accent: var(--wr-primary);

  --octo-surface-elevated: var(--wr-surface-2);
  --octo-surface-border: var(--wr-border);
  --octo-surface-selected: var(--wr-primary-12);
  --octo-shadow-soft: var(--shadow-sm);
}