/* ============================================================
   FENYNX DESIGN SYSTEM — COLORS & TYPE
   Light mode native. Rule of 60 / 20 / 10 / 10:
     60% white + off-whites    (surfaces, paper, breathing room)
     20% black + grayscale     (typography, borders, ink)
     10% purple  #5C2EEA       (brand, gradient-friendly)
     10% orange  #FF4F29       (spark — never gradient)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ────────────────────────────────────────────
     PRIMITIVES — raw palette
     ──────────────────────────────────────────── */

  /* Whites & off-whites — 60% (dominant surfaces) */
  --fx-white:        #FFFFFF;
  --fx-paper:        #FAFAFB;  /* app background */
  --fx-paper-2:      #F5F5F7;  /* card / surface */
  --fx-paper-3:      #EFEFF2;  /* elevated surface */
  --fx-paper-tint:   #F8F4FF;  /* purple-tinted paper */

  /* Blacks & grays — 20% (ink / structure) */
  --fx-black:        #000000;
  --fx-ink-1:        #0D0D0D;  /* primary text, max contrast */
  --fx-ink-2:        #19191E;  /* heavy ink, dark surface inversions */
  --fx-ink-3:        #2A2A32;  /* secondary text */
  --fx-gray-1:       #6B6B73;  /* tertiary text */
  --fx-gray-2:       #9C9CA3;  /* muted text, placeholders */
  --fx-gray-3:       #C9C9CE;  /* borders */
  --fx-gray-4:       #E2E2E6;  /* hairlines */
  --fx-border:       rgba(13, 13, 13, 0.08);
  --fx-border-strong:rgba(13, 13, 13, 0.14);

  /* Purple — 10% — liquid, gradient-friendly */
  --fx-purple:        #5C2EEA;
  --fx-purple-deep:   #3A1E7A;
  --fx-purple-light:  #7B52F0;
  --fx-purple-soft:   #EFE9FF;     /* purple wash for backgrounds */
  --fx-purple-muted:  rgba(92, 46, 234, 0.10);
  --fx-purple-grad:   linear-gradient(135deg, #5C2EEA 0%, #3A1E7A 100%);
  --fx-purple-grad-v: linear-gradient(180deg, #5C2EEA 0%, #3A1E7A 100%);

  /* Orange — 10% — spark, NEVER gradient, NEVER mixed */
  --fx-orange:       #FF4F29;
  --fx-orange-mid:   #FF6A00;
  --fx-orange-dark:  #CC4F00;
  --fx-orange-soft:  #FFEEE9;     /* orange wash for backgrounds */

  /* Text tokens */
  --fx-text:          var(--fx-ink-1);
  --fx-text-strong:   var(--fx-black);
  --fx-text-sub:      var(--fx-gray-1);
  --fx-text-muted:    var(--fx-gray-2);
  --fx-text-disabled: var(--fx-gray-3);
  --fx-text-on-dark:  rgba(255, 255, 255, 0.92);


  /* ────────────────────────────────────────────
     SEMANTIC TOKENS — intent
     ──────────────────────────────────────────── */

  /* Layout */
  --fx-color-bg:         var(--fx-paper);
  --fx-color-surface:    var(--fx-white);
  --fx-color-surface-2:  var(--fx-paper-2);
  --fx-color-surface-3:  var(--fx-paper-3);
  --fx-color-border:     var(--fx-border);
  --fx-color-overlay:    rgba(13, 13, 13, 0.55);

  /* Brand */
  --fx-color-brand:      var(--fx-purple);
  --fx-color-brand-grad: var(--fx-purple-grad);
  --fx-color-accent:     var(--fx-orange);

  /* Semantic states (tuned for light mode contrast) */
  --fx-color-success:    #0F9D6F;
  --fx-color-warning:    #D97706;
  --fx-color-danger:     #DC2626;
  --fx-color-info:       #2563EB;

  /* Credit status — product-specific */
  --fx-status-aprovado:     #0F9D6F;
  --fx-status-ativo:        #0F9D6F;
  --fx-status-analise:      #D97706;
  --fx-status-pendente:     #FF9412;
  --fx-status-inadimplente: #DC2626;
  --fx-status-margin-call:  #FF4F29;
  --fx-status-encerrado:    #9C9CA3;


  /* ────────────────────────────────────────────
     TYPOGRAPHY — Inter + JetBrains Mono
     ──────────────────────────────────────────── */

  --fx-font-primary:   'Inter', system-ui, sans-serif;
  --fx-font-secondary: 'Inter', system-ui, sans-serif;
  --fx-font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Scale */
  --fx-text-xs:   11px;
  --fx-text-sm:   13px;
  --fx-text-base: 15px;
  --fx-text-lg:   17px;
  --fx-text-xl:   20px;
  --fx-text-2xl:  24px;
  --fx-text-3xl:  32px;
  --fx-text-4xl:  48px;
  --fx-text-5xl:  64px;

  /* Weights */
  --fx-weight-light:     300;
  --fx-weight-regular:   400;
  --fx-weight-medium:    500;
  --fx-weight-semibold:  600;
  --fx-weight-bold:      700;
  --fx-weight-extrabold: 800;

  /* Line heights */
  --fx-leading-tight:   1.2;
  --fx-leading-snug:    1.35;
  --fx-leading-normal:  1.6;
  --fx-leading-relaxed: 1.75;

  /* Letter spacing */
  --fx-tracking-tight:  -0.02em;
  --fx-tracking-normal:  0em;
  --fx-tracking-wide:    0.06em;
  --fx-tracking-wider:   0.12em;


  /* ────────────────────────────────────────────
     SPACING — base 4
     ──────────────────────────────────────────── */
  --fx-space-1:  4px;
  --fx-space-2:  8px;
  --fx-space-3:  12px;
  --fx-space-4:  16px;
  --fx-space-5:  20px;
  --fx-space-6:  24px;
  --fx-space-8:  32px;
  --fx-space-10: 40px;
  --fx-space-12: 48px;
  --fx-space-16: 64px;
  --fx-space-20: 80px;
  --fx-space-24: 96px;


  /* ────────────────────────────────────────────
     RADII
     ──────────────────────────────────────────── */
  --fx-radius-xs:   2px;
  --fx-radius-sm:   4px;
  --fx-radius-md:   8px;
  --fx-radius-lg:   12px;
  --fx-radius-xl:   16px;
  --fx-radius-2xl:  24px;
  --fx-radius-3xl:  32px;
  --fx-radius-full: 9999px;


  /* ────────────────────────────────────────────
     SHADOWS  (light-mode tuned — soft, layered)
     ──────────────────────────────────────────── */
  --fx-shadow-xs:     0 1px 2px rgba(13, 13, 13, 0.04);
  --fx-shadow-sm:     0 2px 4px rgba(13, 13, 13, 0.05), 0 1px 2px rgba(13, 13, 13, 0.04);
  --fx-shadow-md:     0 4px 12px rgba(13, 13, 13, 0.06), 0 2px 4px rgba(13, 13, 13, 0.04);
  --fx-shadow-lg:     0 12px 24px rgba(13, 13, 13, 0.08), 0 4px 8px rgba(13, 13, 13, 0.04);
  --fx-shadow-xl:     0 24px 48px rgba(13, 13, 13, 0.10), 0 8px 16px rgba(13, 13, 13, 0.06);
  --fx-shadow-purple: 0 8px 24px rgba(92, 46, 234, 0.18);
  --fx-shadow-orange: 0 6px 20px rgba(255, 79, 41, 0.22);


  /* ────────────────────────────────────────────
     MOTION
     Foundational easing + duration tokens. Motion is one of
     Fenynx's brand signals: confident, deliberate, never bouncy
     for financial states; spring only on decorative / brand moments.
     ──────────────────────────────────────────── */

  /* Easing curves */
  --fx-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* default UI motion */
  --fx-ease-in:       cubic-bezier(0.4, 0, 1, 1);      /* exit / disappear */
  --fx-ease-out:      cubic-bezier(0, 0, 0.2, 1);      /* enter / appear */
  --fx-ease-emphasis: cubic-bezier(0.2, 0, 0, 1);      /* expressive enter */
  --fx-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* brand only */

  /* Duration scale */
  --fx-duration-1: 80ms;    /* micro feedback (button press tint) */
  --fx-duration-2: 160ms;   /* hover, focus, small state changes */
  --fx-duration-3: 240ms;   /* card lift, panel open */
  --fx-duration-4: 360ms;   /* sheet, dialog, page transition */
  --fx-duration-5: 600ms;   /* hero entrances, narrative motion */
  --fx-duration-6: 1200ms;  /* signature gradient pulse, idle loops */

  /* Aliases (legacy) */
  --fx-ease-default:  var(--fx-ease-standard);
  --fx-duration-fast: var(--fx-duration-2);
  --fx-duration-base: var(--fx-duration-3);
  --fx-duration-slow: var(--fx-duration-4);
  --fx-transition-base: all var(--fx-duration-3) var(--fx-ease-standard);


  /* ────────────────────────────────────────────
     Z-INDEX
     ──────────────────────────────────────────── */
  --fx-z-base:     0;
  --fx-z-raised:   10;
  --fx-z-dropdown: 100;
  --fx-z-sticky:   200;
  --fx-z-modal:    300;
  --fx-z-toast:    400;
  --fx-z-tooltip:  500;
}


/* ============================================================
   SEMANTIC ELEMENT STYLES
   Light-mode baseline — hi-fi screens can extend.
   ============================================================ */

.fx-base {
  background: var(--fx-color-bg);
  color: var(--fx-text);
  font-family: var(--fx-font-secondary);
  font-size: var(--fx-text-base);
  line-height: var(--fx-leading-normal);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* Headings — display face (Inter 800 extrabold) */
.fx-display, .fx-h1, .fx-h2, .fx-h3 {
  font-family: var(--fx-font-primary);
  color: var(--fx-ink-1);
  letter-spacing: var(--fx-tracking-tight);
  line-height: var(--fx-leading-tight);
  font-weight: var(--fx-weight-extrabold);
}

.fx-display { font-size: var(--fx-text-5xl); letter-spacing: -0.03em; line-height: 1; }
.fx-h1      { font-size: var(--fx-text-4xl); }
.fx-h2      { font-size: var(--fx-text-3xl); }
.fx-h3      { font-size: var(--fx-text-2xl); font-weight: var(--fx-weight-bold); }

/* Body */
.fx-h4 {
  font-family: var(--fx-font-secondary);
  font-size: var(--fx-text-xl);
  font-weight: var(--fx-weight-semibold);
  color: var(--fx-ink-1);
  line-height: var(--fx-leading-snug);
}

.fx-p    { color: var(--fx-text);     font-size: var(--fx-text-base); line-height: var(--fx-leading-normal); }
.fx-lead { color: var(--fx-text);     font-size: var(--fx-text-lg);   line-height: var(--fx-leading-normal); }
.fx-sub  { color: var(--fx-text-sub); font-size: var(--fx-text-sm);   line-height: var(--fx-leading-normal); }

/* Editorial italic — Inter Light Italic for pull quotes */
.fx-editorial {
  font-family: var(--fx-font-secondary);
  font-weight: var(--fx-weight-light);
  font-style: italic;
  color: var(--fx-text);
  font-size: var(--fx-text-2xl);
  line-height: var(--fx-leading-snug);
  letter-spacing: -0.01em;
}

/* Eyebrow / label — uppercase, tight-spaced */
.fx-eyebrow {
  font-family: var(--fx-font-secondary);
  font-size: 10px;
  font-weight: var(--fx-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--fx-tracking-wider);
  color: var(--fx-purple);
}

/* Mono — financial figures */
.fx-mono, .fx-code, .fx-value {
  font-family: var(--fx-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.fx-value-lg { font-family: var(--fx-font-mono); font-size: var(--fx-text-3xl); font-weight: var(--fx-weight-bold); color: var(--fx-ink-1); letter-spacing: -0.01em; }
.fx-value-md { font-family: var(--fx-font-mono); font-size: var(--fx-text-xl);  font-weight: var(--fx-weight-semibold); color: var(--fx-ink-1); }

/* Links */
.fx-link { color: var(--fx-purple); text-decoration: none; border-bottom: 1px solid rgba(92, 46, 234, 0.3); transition: var(--fx-transition-base); }
.fx-link:hover { color: var(--fx-purple-deep); border-bottom-color: var(--fx-purple); }