/* theme.css */
/* VERSION 1.0.0 */
/* LAST UPDATE 21/04/2026 */

/* ---------- FONTS IMPORT ---------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Michroma:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   PALETTE — raw brand colors (do not use directly in components;
   use the semantic tokens below)
   ============================================================ */

:root {
  /* --- 1. BRAND COLORS (PRIMITIVES) --- */
  --force-light: #b8bbc0;
  --force-light-secondary: #d8e2eb;
  --force-orange: #f96d17;
  --force-light-blue: #1D87F0;
  --force-lightest-blue: #1C58BA;
  --force-dark-blue: #010d27;
  --force-darker-blue: #02090f;
  --force-navy-blue: #142D41;
  --force-navy-dark-blue: #0D1E2C;
  --force-red: #EA1212;
  --force-red-dark: #780404;
  
  /* ---------- TYPOGRAPHY ---------- */
  --font-headline: 'Michroma', sans-serif;
  --font-body: 'Consolas', sans-serif;
  --font-label: 'JetBrains Mono', monospace;

  --h1: 2rem;      /* 32px */
  --h2: 1.5rem;    /* 24px */
  --h3: 1.25rem;   /* 20px */
  --h4: 1rem;      /* 16px */
  --h5: 0.875rem;   /* 14px */
  --h6: 0.75rem;  /* 12px */

  --text-lg: 1.125rem;    /* 18px */
  --text-base: 1rem;  /* 16px */
  --text-sm: 0.875rem;     /* 14px */
  --text-xs: 0.75rem;    /* 12px */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  /* ---------- SPACING (4px base) ---------- */
  --p-0: 0;
  --p-1: 0.25rem;   /* 4px */
  --p-2: 0.5rem;    /* 8px */
  --p-3: 0.75rem;   /* 12px */
  --p-4: 1rem;      /* 16px */
  --p-5: 1.25rem;   /* 20px */
  --p-6: 1.5rem;    /* 24px */
  --p-8: 2rem;      /* 32px */
  --p-9: 2.5rem;    /* 40px */
  --p-10: 3rem;     /* 48px */
  --p-12: 4rem;     /* 64px */
  --p-16: 6rem;     /* 96px */
  
  /* ---------- BORDERS & RADIUS ---------- */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;

  --radius-default: 0.25rem;  /* 4px */
  --radius-lg: 0.5rem;       /* 8px */
  --radius-xl: 0.75rem;         /* 12px */
  --radius-full: 9999px;

  /* --- 2. THEME TOKENS --- */
  /* Dark Theme Default */
  --bg-dark: #02090f;
  --bg-dark-main: #051624;
  --bg-dark-sidebar: #051624;
  --bg-card-dark-blue: #1a2b3c;
  --bg-card-dark-blue-hover: #0e202f80;
  --bg-card-dark-alt: #0d1e2c;
  --bg-card-dark-alt-hover: #1a2b3c80;
  /* Borders */
  --border-dark-default: #415165;
  --border-dark-hover: #364352;
  --border-dark-subtle: #303e52;
  /* Text */
  --text-dark-primary: #f3f4f6;
  --text-dark-strong: #d8e2eb;
  --text-dark-inverse: #02090f;
  --text-dark-muted: #92969d;
  --text-dark-disabled: #555a61;

  /* Light Theme */
  --bg-light: #f0f0f0;
  --bg-light-main: #e8e8e8;
  --bg-light-sidebar: #e8e8e8;
  --bg-card-light-white: #d7d7d7;
  --bg-card-light-white-hover: #c7c7c7;
  --bg-card-light-alt: #02090f;
  --bg-card-light-alt-hover: #051624;
  --bg-card-light-blue: #142D41;
  --bg-card-light-blue-hover: #0e202f;
  /* Borders */
  --border-light-default: #415165;
  --border-light-hover: #364352;
  --border-light-subtle: #303e52;
  /* Text */
  --text-light-primary: #02090f;
  --text-light-strong: #02090f;
  --text-light-inverse: #1a2b3c;
  --text-light-muted: #92969d;
  --text-light-disabled: #555a61;

  /* ---------- ACCENTS (theme-agnostic) ---------- */
  --accent-link: #1D87F0;
  --accent-green: #10b981;
  --accent-red: #ef4444;
  --accent-blue: #1D87F0;
  --accent-orange: #f96d17;
  --accent-purple: #a855f7;
  --accent-yellow: #eab308;
  --accent-cyan: #06b6d4;

  /* ---------- SEMANTIC STATUS TOKENS ---------- */
  --force-info: #3b82f6;
  --force-success: #22c55e;
  --force-danger: #ef4444;
  --force-warning: #eab308;
  --force-accent: #8b5cf6;

  /* ---------- GRADIENTS ---------- */
  --gradient-blue: linear-gradient(135deg, #1D87F0 0%, #1C58BA 100%);
  --gradient-orange: linear-gradient(135deg, #f96d17 0%, #c75a13 100%);
  --gradient-red: linear-gradient(135deg, #EA1212 0%, #780404 100%);
  --gradient-navy: linear-gradient(135deg, #142D41 0%, #02090f 100%);

  /* ---------- OVERLAYS ---------- */
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --overlay-light: rgba(0, 0, 0, 0.3);

  /* ---------- SHADOWS — elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.3);

  /* ---------- GLOW — electrical/signal ---------- */
  --glow-blue: 0 0 20px rgba(27, 135, 243, 0.2);
  --glow-orange: 0 0 20px rgba(249, 109, 23, 0.2);
  --glow-red: 0 0 20px rgba(234, 18, 18, 0.2);
  --glow-green: 0 0 20px rgba(16, 185, 129, 0.2);
  --led-glow-blue: 0 0 15px rgba(27, 135, 243, 0.5);
  --led-glow-orange: 0 0 15px rgba(249, 109, 23, 0.5);
  --led-glow-red: 0 0 15px rgba(234, 18, 18, 0.5);
  --led-glow-green: 0 0 15px rgba(16, 185, 129, 0.5);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.8, 0.0, 0.8, 0.2);
  --ease-in-out: cubic-bezier(0.7, 0.0, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* ---------- Z-INDEX ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1500;
  --z-max: 9999;

  /* ---------- BREAKPOINTS (for JS/reference) ---------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* --- 3. SEMANTIC THEME VARIABLES --- */
/* Default (Dark Mode) */
:root,
:root[data-theme="dark"] {
  --color-bg-base: var(--bg-dark);
  --color-bg-main: var(--bg-dark-main);
  --color-bg-card: var(--bg-card-dark-blue);
  --color-text-primary: var(--text-dark-primary);
  --color-text-muted: var(--text-dark-muted);
  --color-border-default: var(--border-dark-default);
  --color-border-subtle: var(--border-dark-subtle);

  --color-glass-bg: rgba(22, 34, 45, 0.7);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  --color-grid-line: rgba(27, 135, 243, 0.05);
}

/* Light Mode Override */
:root[data-theme="light"] {
  --color-bg-base: var(--bg-light);
  --color-bg-main: var(--bg-light-main);
  --color-bg-card: var(--bg-card-light-white);
  --color-text-primary: var(--text-light-primary);
  --color-text-muted: var(--text-light-muted);
  --color-border-default: var(--border-light-default);
  --color-border-subtle: var(--border-light-subtle);

  --color-glass-bg: rgba(255, 255, 255, 0.6);
  --color-glass-border: rgba(0, 0, 0, 0.1);
  --color-grid-line: rgba(27, 135, 243, 0.1);

  /* Semantic status tokens — light mode overrides */
  --force-info: #2563eb;
  --force-success: #16a34a;
  --force-danger: #dc2626;
  --force-warning: #ca8a04;
  --force-accent: #7c3aed;
}

/* --- BASE STYLES --- */
body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--p-1) 0;
  line-height: var(--leading-tight);
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

p {
  font-size: var(--text-base);
  margin-bottom: var(--p-1);
}

a {
  color: var(--accent-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: #4aa5f7; }

::selection { background: rgba(29, 135, 240, 0.35); color: #f3f4f6; }

.label-text {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.label-caps {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- UTILITIES --- */
.fui-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px);
}

.angular-cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}

.angular-cut-inverse {
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}

.glass-panel {
  background: var(--color-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-glass-border);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.technical-border-solid {
  border: 1px solid;
  border-image-source: linear-gradient(45deg, var(--force-light-blue), transparent, var(--force-light-blue));
  border-image-slice: 1;
}

/* --- ATOMIC COMPONENTS --- */
/* ATOMS */
.fui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-2) var(--p-6);
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border: none;
  color: #fff;
  transition: all 0.2s ease;
}

.fui-btn--primary {
  background: var(--gradient-blue);
  box-shadow: var(--glow-blue);
}

.fui-btn--primary:hover {
  filter: brightness(1.2);
}

.fui-btn--warning {
  background: var(--gradient-orange);
  box-shadow: var(--glow-orange);
}

.fui-btn--warning:hover {
  filter: brightness(1.2);
}

.fui-btn--outline {
  background: transparent;
  color: var(--force-light-blue);
  border: 1px solid var(--force-light-blue);
}

.fui-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.fui-btn--ghost:hover {
  background: var(--color-surface-1);
  border-color: var(--color-border-subtle);
  color: var(--color-text-primary);
}

.fui-input {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  padding: var(--p-2) var(--p-4);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.fui-input:focus {
  border-color: var(--force-light-blue);
  box-shadow: 0 0 8px rgba(29, 135, 240, 0.2);
}

.fui-tag {
  display: inline-block;
  padding: var(--p-1) var(--p-2);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  background: rgba(29, 135, 240, 0.1);
  color: var(--force-light-blue);
  border: 1px solid rgba(29, 135, 240, 0.3);
  text-transform: uppercase;
}

.fui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-bg-main);
  border: 1px solid var(--force-light-blue);
  color: var(--force-light-blue);
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  overflow: hidden;
}

.fui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fui-progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border-default);
  overflow: hidden;
  position: relative;
}

.fui-progress-bar__fill {
  height: 100%;
  background: var(--gradient-blue);
  box-shadow: var(--glow-blue);
  transition: width 0.3s ease;
}

/* MOLECULES */
.fui-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--p-2);
  margin-bottom: var(--p-4);
}

.fui-search-bar {
  display: flex;
  gap: var(--p-2);
}

.fui-stat-box {
  display: flex;
  flex-direction: column;
  padding: var(--p-4);
  background: rgba(29, 135, 240, 0.05);
  border-left: 2px solid var(--force-light-blue);
}

.fui-stat-box__value {
  font-family: var(--font-headline);
  font-size: var(--h3);
  color: var(--color-text-primary);
  margin: var(--p-1) 0;
}

.fui-nav-item {
  display: flex;
  align-items: center;
  gap: var(--p-4);
  padding: var(--p-2) var(--p-4);
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  text-transform: uppercase;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.fui-nav-item:hover,
.fui-nav-item--active {
  background: rgba(29, 135, 240, 0.1);
  color: var(--force-light-blue);
  border-left-color: var(--force-light-blue);
}

/* Typography & Color Utilities (from SKILL.md) */
.font-headline {
  font-family: var(--font-headline);
}

.font-body {
  font-family: var(--font-body);
}

.font-label {
  font-family: var(--font-label);
}

.text-force-blue {
  color: var(--force-light-blue) !important;
}

.text-force-orange {
  color: var(--force-orange) !important;
}

.text-force-red {
  color: var(--force-red) !important;
}

.text-accent-red {
  color: var(--accent-red) !important;
}

.border-accent-red {
  border-color: var(--accent-red);
}

.text-accent-orange {
  color: var(--accent-orange) !important;
}

.border-accent-orange {
  border-color: var(--accent-orange);
}

.border-force-red {
  border-color: var(--force-red) !important;
}

.border-force-red-subtle {
  border-color: rgba(234, 18, 18, 0.3) !important;
}

.bg-force-red-transparent {
  background: rgba(234, 18, 18, 0.05) !important;
}

/* corrigido conforme var */
.shadow-glow-blue {
  box-shadow: var(--glow-blue);
}

.shadow-glow-orange {
  box-shadow: var(--glow-orange);
}

.shadow-glow-green {
  box-shadow: var(--glow-green);
}

/* ORGANISMS */
.fui-card {
  padding: var(--p-6);
  display: flex;
  flex-direction: column;
  gap: var(--p-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fui-card__header {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--p-2);
}

.fui-card__header h3 {
  margin: 0;
  color: var(--force-light-blue);
}

.fui-card__body {
  flex-grow: 1;
}

.fui-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--p-2);
  margin-top: auto;
}

.fui-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.fui-table th {
  padding: var(--p-4);
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-default);
}

.fui-table td {
  padding: var(--p-4);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

.fui-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

:root[data-theme="light"] .fui-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}