/* ============================================================
   TRST Serviços Eléctricos — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ── Google Fonts import ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* NOTE: "Barlow" and "Barlow Condensed" are substitutes for the
   proprietary geometric sans used in the original TRST branding.
   Please provide original font files (OTF/TTF/WOFF2) to replace. */

:root {

  /* ═══════════════════════════════════════════════
     COLOR PALETTE — BASE
  ═══════════════════════════════════════════════ */

  /* Primary — Navy Blue (trust, engineering, depth) */
  --color-navy-900: #071A44;
  --color-navy-800: #0D2B6E;   /* PRIMARY — main brand blue */
  --color-navy-700: #1A3A82;
  --color-navy-600: #2451A8;
  --color-navy-500: #3468C0;
  --color-navy-400: #6B92D6;
  --color-navy-300: #9BB5E5;
  --color-navy-200: #C8D8F2;
  --color-navy-100: #EBF1FA;
  --color-navy-50:  #F4F7FD;

  /* Accent — Orange (energy, action, electricity) */
  --color-orange-900: #7A2E06;
  --color-orange-800: #A83D09;
  --color-orange-700: #C04D0A;   /* hover state */
  --color-orange-600: #D4580C;
  --color-orange-500: #E85C0D;   /* ACCENT — main brand orange */
  --color-orange-400: #FF7A35;
  --color-orange-300: #FF9A65;
  --color-orange-200: #FFBF9A;
  --color-orange-100: #FFEADB;
  --color-orange-50:  #FFF7F2;

  /* Neutral — Steel/Slate */
  --color-neutral-900: #0F1117;
  --color-neutral-800: #1A1A2E;
  --color-neutral-700: #2D3348;
  --color-neutral-600: #4A5568;
  --color-neutral-500: #718096;
  --color-neutral-400: #A0AEC0;
  --color-neutral-300: #CBD5E0;
  --color-neutral-200: #E2E8F0;
  --color-neutral-100: #EDF2F7;
  --color-neutral-50:  #F7F9FC;
  --color-white:       #FFFFFF;

  /* Status */
  --color-success: #2F855A;
  --color-warning: #D69E2E;
  --color-error:   #C53030;
  --color-info:    #2B6CB0;

  /* ═══════════════════════════════════════════════
     COLOR PALETTE — SEMANTIC
  ═══════════════════════════════════════════════ */

  /* Brand */
  --brand-primary:          var(--color-navy-800);
  --brand-primary-dark:     var(--color-navy-900);
  --brand-primary-light:    var(--color-navy-600);
  --brand-accent:           var(--color-orange-500);
  --brand-accent-hover:     var(--color-orange-700);
  --brand-accent-light:     var(--color-orange-400);

  /* Foreground (text) */
  --fg-1:                   var(--color-neutral-900);   /* primary body text */
  --fg-2:                   var(--color-neutral-600);   /* secondary / muted */
  --fg-3:                   var(--color-neutral-400);   /* placeholder / disabled */
  --fg-inverse:             var(--color-white);         /* text on dark bg */
  --fg-accent:              var(--brand-accent);        /* highlighted text */
  --fg-brand:               var(--brand-primary);       /* navy text */

  /* Background */
  --bg-page:                var(--color-neutral-50);    /* #F7F9FC */
  --bg-surface:             var(--color-white);
  --bg-surface-raised:      var(--color-white);
  --bg-dark:                var(--brand-primary);       /* navy sections */
  --bg-darker:              var(--color-neutral-800);   /* charcoal sections */
  --bg-accent:              var(--brand-accent);        /* orange sections */
  --bg-subtle:              var(--color-neutral-100);   /* light grey sections */

  /* Border */
  --border-default:         var(--color-neutral-200);
  --border-strong:          var(--color-neutral-300);
  --border-accent:          var(--brand-accent);
  --border-brand:           var(--brand-primary);

  /* Interactive */
  --interactive-primary:    var(--brand-accent);
  --interactive-primary-hover: var(--brand-accent-hover);
  --interactive-secondary:  var(--brand-primary);
  --interactive-secondary-hover: var(--color-navy-700);
  --focus-ring:             var(--color-orange-400);

  /* ═══════════════════════════════════════════════
     TYPOGRAPHY — FAMILIES
  ═══════════════════════════════════════════════ */

  --font-display:   'Barlow Condensed', 'Barlow', sans-serif;  /* headlines, wordmarks */
  --font-body:      'Barlow', sans-serif;                        /* all body copy */
  --font-mono:      'Courier New', monospace;                   /* technical specs */

  /* ═══════════════════════════════════════════════
     TYPOGRAPHY — SCALE
  ═══════════════════════════════════════════════ */

  /* Font sizes */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   32px;
  --text-4xl:   40px;
  --text-5xl:   52px;
  --text-6xl:   64px;
  --text-7xl:   80px;

  /* Font weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line heights */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    2;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ═══════════════════════════════════════════════
     SPACING
  ═══════════════════════════════════════════════ */

  --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:   80px;
  --section-px:   24px;

  /* Container */
  --container-max: 1200px;
  --container-md:  960px;
  --container-sm:  720px;

  /* Grid */
  --grid-gutter: 24px;

  /* ═══════════════════════════════════════════════
     BORDER RADIUS
  ═══════════════════════════════════════════════ */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* ═══════════════════════════════════════════════
     SHADOWS
  ═══════════════════════════════════════════════ */

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 4px 24px rgba(0,0,0,0.12);
  --shadow-xl:   0 8px 40px rgba(0,0,0,0.16);
  --shadow-card: var(--shadow-md);
  --shadow-nav:  0 2px 8px rgba(0,0,0,0.10);

  /* ═══════════════════════════════════════════════
     TRANSITIONS
  ═══════════════════════════════════════════════ */

  --transition-fast:   150ms ease-out;
  --transition-base:   220ms ease-out;
  --transition-slow:   350ms ease-out;

  /* ═══════════════════════════════════════════════
     Z-INDEX LAYERS
  ═══════════════════════════════════════════════ */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ═══════════════════════════════════════════════
   SEMANTIC TYPE ELEMENTS
═══════════════════════════════════════════════ */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-3);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* ═══════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════ */

.text-accent  { color: var(--brand-accent); }
.text-brand   { color: var(--brand-primary); }
.text-inverse  { color: var(--fg-inverse); }
.text-muted    { color: var(--fg-2); }

.bg-dark       { background: var(--bg-dark); color: var(--fg-inverse); }
.bg-darker    { background: var(--bg-darker); color: var(--fg-inverse); }
.bg-accent    { background: var(--bg-accent); color: var(--fg-inverse); }
.bg-surface   { background: var(--bg-surface); }
.bg-subtle    { background: var(--bg-subtle); }

/* Icon circle — orange background with white icon inside */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--brand-accent);
  color: var(--color-white);
  flex-shrink: 0;
}

.icon-circle--sm {
  width: 40px;
  height: 40px;
}

.icon-circle--lg {
  width: 72px;
  height: 72px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand-accent);
  color: var(--color-white);
  border-color: var(--brand-accent);
}

.btn--primary:hover {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
}

.btn--secondary {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn--secondary:hover {
  background: var(--brand-primary);
  color: var(--color-white);
}

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.6);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--color-white);
}

.btn--sm {
  font-size: var(--text-sm);
  padding: 10px 20px;
}

.btn--lg {
  font-size: var(--text-md);
  padding: 18px 36px;
}

/* Card */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card--bordered {
  box-shadow: none;
  border: 1px solid var(--border-default);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.badge--accent {
  background: var(--color-orange-100);
  color: var(--color-orange-800);
}

.badge--brand {
  background: var(--color-navy-100);
  color: var(--color-navy-800);
}

.badge--neutral {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

/* Section wrapper */
.section {
  padding: var(--section-py) var(--section-px);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-8) 0;
}

/* Section label (eyebrow) */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-accent);
  margin-bottom: var(--space-3);
}