/* ============================================================
   ADANDU.RO — Design System Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Brand font — Plexeina (display/headline use) */
@font-face {
  font-family: 'Plexeina';
  src: url('fonts/plexeina-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* Core palette */
  --amber:              #E5A00D;
  --amber-bright:       #F0B429;
  --amber-dim:          rgba(229, 160, 13, 0.4);
  --amber-label:        rgba(229, 160, 13, 0.85);

  /* Backgrounds */
  --bg-deep:            #020617;
  --bg-warm:            #3d1f00;
  --bg-section:         #020617;
  --bg-gradient:        radial-gradient(ellipse 80% 60% at 100% 100%, rgba(61,31,0,0.9) 0%, #020617 65%);
  --bg-hero-glow:       radial-gradient(ellipse 60% 50% at 90% 90%, rgba(229,160,13,0.18) 0%, transparent 70%);

  /* Text */
  --white:              #FFFFFF;
  --white-muted:        rgba(255, 255, 255, 0.5);
  --white-subtle:       rgba(255, 255, 255, 0.25);
  --white-faint:        rgba(255, 255, 255, 0.1);

  /* Cards */
  --card-border:        rgba(229, 160, 13, 0.2);
  --card-border-hover:  rgba(229, 160, 13, 0.38);
  --card-fill:          rgba(229, 160, 13, 0.07);
  --card-fill-hover:    rgba(229, 160, 13, 0.12);
  --card-shadow:        0 4px 24px rgba(229, 160, 13, 0.08);
  --card-shadow-hover:  0 8px 40px rgba(229, 160, 13, 0.14);

  /* Status */
  --green-online:       #22c55e;
  --red-offline:        #ef4444;
  --green-glow:         0 0 8px rgba(34, 197, 94, 0.7);
  --red-glow:           0 0 8px rgba(239, 68, 68, 0.7);

  /* Dividers */
  --divider:            rgba(229, 160, 13, 0.15);
  --divider-strong:     rgba(229, 160, 13, 0.25);

  /* CTA Button */
  --btn-bg:             #E5A00D;
  --btn-bg-hover:       #F0B429;
  --btn-text:           #020617;
  --btn-shadow:         0 4px 20px rgba(229, 160, 13, 0.35);
  --btn-shadow-hover:   0 6px 30px rgba(229, 160, 13, 0.5);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* Font families */
  --font-display:       'Plexeina', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:          'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* Plexeina: brand font for display/headline use (uploaded).
     Plus Jakarta Sans: body, labels, UI text. */

  /* Display scale */
  --text-hero:          clamp(52px, 8vw, 96px);
  --text-display:       clamp(36px, 5vw, 64px);
  --text-headline:      clamp(28px, 3.5vw, 48px);
  --text-subheading:    clamp(20px, 2.5vw, 32px);

  /* Body scale */
  --text-body-lg:       18px;
  --text-body:          16px;
  --text-body-sm:       14px;
  --text-label:         12px;
  --text-caption:       11px;

  /* Weights */
  --weight-black:       800;
  --weight-bold:        700;
  --weight-semibold:    600;
  --weight-medium:      500;
  --weight-regular:     400;

  /* Line heights */
  --leading-tight:      1.05;
  --leading-snug:       1.2;
  --leading-normal:     1.5;
  --leading-relaxed:    1.65;

  /* Letter spacing */
  --tracking-wide:      0.08em;
  --tracking-widest:    0.15em;
  --tracking-tight:     -0.02em;
  --tracking-tighter:   -0.03em;
}

/* ============================================================
   SPACING TOKENS
   ============================================================ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section padding */
  --section-py:   clamp(80px, 10vw, 140px);
  --content-max:  1200px;
  --content-px:   clamp(24px, 5vw, 64px);

  /* Radii */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-pill:  999px;

  /* Border widths */
  --border-thin:  1px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

body {
  font-family:      var(--font-sans);
  background-color: var(--bg-deep);
  color:            var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering:   optimizeLegibility;
}

h1, .h1 {
  font-family:    var(--font-display);
  font-size:      var(--text-hero);
  font-weight:    var(--weight-black);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color:          var(--white);
  text-wrap:      pretty;
}

h2, .h2 {
  font-family:    var(--font-display);
  font-size:      var(--text-display);
  font-weight:    var(--weight-black);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color:          var(--white);
  text-wrap:      pretty;
}

h3, .h3 {
  font-family:    var(--font-display);
  font-size:      var(--text-headline);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-snug);
  color:          var(--white);
}

h4, .h4 {
  font-size:      var(--text-subheading);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-normal);
  color:          var(--white);
}

p, .body {
  font-size:   var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color:       var(--white-muted);
}

.body-lg {
  font-size:   var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color:       var(--white-muted);
}

.label {
  font-size:      var(--text-label);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--amber-label);
}

.caption {
  font-size:   var(--text-caption);
  font-weight: var(--weight-medium);
  color:       var(--white-subtle);
}

/* Stat number */
.stat-number {
  font-size:      clamp(40px, 5vw, 72px);
  font-weight:    var(--weight-black);
  line-height:    1;
  letter-spacing: var(--tracking-tight);
  color:          var(--amber);
}

/* Wordmark */
.wordmark {
  font-size:      clamp(14px, 1.5vw, 18px);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--amber);
}

/* ============================================================
   COMPONENT BASE STYLES
   ============================================================ */

/* Card */
.card {
  background:    var(--card-fill);
  border:        var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--card-shadow);
  transition:    border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--card-border-hover);
  background:   var(--card-fill-hover);
  box-shadow:   var(--card-shadow-hover);
}

/* CTA Button */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  background:      var(--btn-bg);
  color:           var(--btn-text);
  font-family:     var(--font-sans);
  font-weight:     var(--weight-bold);
  font-size:       var(--text-body);
  letter-spacing:  0.02em;
  padding:         12px 28px;
  border-radius:   var(--radius-md);
  border:          none;
  cursor:          pointer;
  box-shadow:      var(--btn-shadow);
  text-decoration: none;
  transition:      background 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background:  var(--btn-bg-hover);
  box-shadow:  var(--btn-shadow-hover);
}

/* Badge / Stack pill */
.badge {
  display:        inline-flex;
  align-items:    center;
  background:     rgba(229, 160, 13, 0.1);
  border:         1px solid rgba(229, 160, 13, 0.22);
  border-radius:  var(--radius-sm);
  padding:        4px 12px;
  font-size:      var(--text-body-sm);
  font-weight:    var(--weight-medium);
  color:          rgba(229, 160, 13, 0.9);
  letter-spacing: 0.01em;
}

/* Status dot */
.status-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}
.status-dot.online {
  background:  var(--green-online);
  box-shadow:  var(--green-glow);
  animation:   pulse-dot 2s ease-in-out infinite;
}
.status-dot.offline {
  background: var(--red-offline);
  box-shadow: var(--red-glow);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Section divider */
.divider {
  width:  100%;
  height: 1px;
  background: var(--divider);
}

/* ============================================================
   SCROLL / ENTRANCE ANIMATION
   ============================================================ */
.fade-up {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity:   1;
  transform: translateY(0);
}