/* public/assets/css/variable.css - global design tokens */

:root {
  /* Core surfaces */
  --bg-950: #05080d;
  --bg-900: #0a1119;
  --bg-accent: #081422;
  --surface-900: #0d1724;
  --surface-850: #101b29;
  --surface-800: #172537;
  --surface-700: #1c2f45;
  --surface-650: #22384f;
  --surface-panel: rgba(12, 26, 39, 0.92);
  --surface-panel-alt: rgba(14, 28, 43, 0.96);
  --surface-interactive: rgba(24, 40, 59, 0.7);
  --surface-interactive-hover: rgba(18, 38, 58, 0.65);
  --surface-stat: rgba(11, 24, 36, 0.74);
  --surface-overlay: rgba(10, 22, 34, 0.92);
  --surface-overlay-strong: rgba(10, 22, 34, 0.95);
  --surface-soft-light: #162436;
  --surface-muted: #23384d;
  --surface-warning: rgba(56, 47, 19, 0.95);

  /* Typography */
  --text-100: #eaf4ff;
  --text-200: #d8e7f5;
  --text-300: #b8cce1;
  --text-500: #7f9ab5;
  --text-strong: #f8fcff;
  --text-bright: #ffffff;
  --text-brand: #f2f8ff;
  --text-heading: #f3f9ff;
  --text-highlight: #f6fcff;
  --text-muted-2: #999999;

  /* Brand */
  --green-500: #16c279;
  --green-400: #36df9a;
  --blue-500: #1f6fff;
  --blue-400: #4d92ff;
  --blue-300: #667eea;
  --purple-400: #764ba2;

  /* States */
  --danger-500: #d6475a;
  --success-500: #22b487;
  --warning-500: #b79a2f;
  --primary-500: #007bff;
  --primary-400: #3b82f6;
  --warning-400: #ffc107;
  --danger-400: #dc3545;
  --success-400: #28a745;
  --success-300: #20c997;
  --success-350: #22c55e;
  --success-200: #1f4f3c;
  --success-100: #17382d;
  --danger-200: #4f2430;
  --danger-100: #3e1e28;
  --danger-350: #ef4444;
  --info-200: #1f4359;
  --info-300: #1f3f5a;
  --info-100: #1a344a;
  --info-050: #152f45;
  --warning-200: #4d3f1b;
  --warning-100: #3f3418;
  --success-text: #d8e7f5;
  --danger-text: #d8e7f5;
  --warning-text: #d8e7f5;
  --info-text: #d8e7f5;
  --progress-text: #d8e7f5;
  --primary-text: #d8e7f5;
  --accent-orange: #ff6b35;

  /* Borders and overlays */
  --border-700: #21405d;
  --border-soft: rgba(77, 146, 255, 0.28);
  --border-strong: rgba(77, 146, 255, 0.42);
  --border-subtle: rgba(77, 146, 255, 0.22);
  --border-input: rgba(77, 146, 255, 0.35);
  --border-card: rgba(77, 146, 255, 0.24);
  --border-card-strong: rgba(77, 146, 255, 0.26);
  --border-card-stronger: rgba(77, 146, 255, 0.3);
  --border-card-soft: rgba(77, 146, 255, 0.25);
  --border-success: rgba(54, 223, 154, 0.25);
  --border-success-strong: rgba(54, 223, 154, 0.38);
  --border-danger: rgba(214, 71, 90, 0.45);
  --border-danger-strong: rgba(214, 71, 90, 0.52);
  --border-danger-input: rgba(214, 71, 90, 0.65);
  --border-success-soft: rgba(54, 223, 154, 0.3);
  --border-success-panel: rgba(54, 223, 154, 0.45);
  --border-neutral-100: #35506a;
  --border-neutral-200: #30475f;
  --border-neutral-300: #2a3f56;
  --border-neutral-400: #264057;
  --border-neutral-500: #20384f;
  --border-neutral-600: #1a2f43;
  --border-danger-soft: #7e3b49;
  --border-success-soft-light: #2e6a53;
  --border-warning-soft: #7a672b;
  --overlay-blue: rgba(31, 111, 255, 0.18);
  --overlay-blue-soft: rgba(31, 111, 255, 0.1);
  --overlay-blue-strong: rgba(31, 111, 255, 0.22);
  --overlay-green: rgba(22, 194, 121, 0.13);
  --overlay-green-soft: rgba(22, 194, 121, 0.09);
  --overlay-green-strong: rgba(22, 194, 121, 0.18);
  --overlay-green-hover: rgba(54, 223, 154, 0.12);

  /* Layout */
  --header-height: 76px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-soft: 0 12px 30px rgba(1, 4, 10, 0.35);
  --shadow-raise: 0 18px 35px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 24px rgba(4, 8, 15, 0.3);
  --shadow-soft-card: 0 5px 15px rgba(0, 0, 0, 0.1);
  --glow-success: 0 0 14px rgba(54, 223, 154, 0.7);
  --focus-ring: 0 0 0 2px rgba(0, 123, 255, 0.25);
  --shadow-success: 0 4px 20px rgba(40, 167, 69, 0.3);
  --overlay-modal: rgba(0, 0, 0, 0.5);

  /* Gradients */
  --gradient-brand: linear-gradient(
    120deg,
    #0b131d 0%,
    #163252 45%,
    #104632 100%
  );
  --gradient-action: linear-gradient(90deg, #1f6fff 0%, #16c279 100%);
  --gradient-action-hover: linear-gradient(90deg, #4d92ff 0%, #36df9a 100%);
  --gradient-surface: linear-gradient(
    170deg,
    rgba(17, 29, 44, 0.96),
    rgba(11, 19, 30, 0.96)
  );
  --gradient-surface-alt: linear-gradient(
    170deg,
    rgba(20, 34, 51, 0.94),
    rgba(11, 20, 31, 0.94)
  );
  --gradient-body: linear-gradient(
    165deg,
    var(--bg-950) 0%,
    var(--bg-900) 55%,
    var(--bg-accent) 100%
  );
  --gradient-header: linear-gradient(
    110deg,
    rgba(6, 12, 20, 0.95),
    rgba(15, 34, 52, 0.92),
    rgba(14, 63, 44, 0.88)
  );
  --gradient-secondary: linear-gradient(
    125deg,
    rgba(10, 17, 25, 0.96),
    rgba(21, 41, 62, 0.96)
  );
  --gradient-secondary-hover: linear-gradient(
    125deg,
    rgba(18, 31, 47, 0.98),
    rgba(24, 56, 82, 0.98)
  );
  --gradient-danger: linear-gradient(
    120deg,
    rgba(104, 25, 35, 0.92),
    rgba(142, 35, 50, 0.92)
  );
  --gradient-success: linear-gradient(
    120deg,
    rgba(14, 87, 64, 0.92),
    rgba(21, 130, 96, 0.92)
  );
  --gradient-footer: linear-gradient(
    125deg,
    #070d15 0%,
    #0f2336 55%,
    #0a3b2b 100%
  );
  --gradient-recycling: linear-gradient(
    130deg,
    rgba(5, 8, 13, 0.95),
    rgba(13, 28, 44, 0.95),
    rgba(9, 47, 33, 0.92)
  );
  --gradient-points: linear-gradient(135deg, #1e5f47 0%, #1a7a63 100%);
  --gradient-verify: linear-gradient(135deg, #2e3f78 0%, #3e2f67 100%);
}