/* ===========================================================
   Máquina de Presença — Design Tokens
   Three layers: PRIMITIVES → SEMANTIC → COMPONENT
   =========================================================== */

@import url('./brand.css');

:root {
  /* -----------------------------------------------------------
     LAYER 1 — PRIMITIVES (raw values, never used directly in UI)
     ----------------------------------------------------------- */

  /* Neutrals — cool-biased dark scale */
  --color-ink-0:   #000000;
  --color-ink-50:  #04050A;
  --color-ink-100: #07090D;   /* canvas */
  --color-ink-200: #0D1016;   /* surface */
  --color-ink-300: #151922;   /* elevated */
  --color-ink-400: #1E2431;
  --color-ink-500: #2A3142;
  --color-ink-600: #3B4356;
  --color-ink-700: #5C6372;   /* muted text */
  --color-ink-800: #A0A8B8;   /* secondary text */
  --color-ink-900: #E8ECF2;   /* primary text */
  --color-ink-1000:#FFFFFF;

  /* Signal green — primary */
  --color-signal-100: #C8FBE1;
  --color-signal-200: #8EF8C3;
  --color-signal-300: #5EF3A3;   /* primary */
  --color-signal-400: #2DDC85;
  --color-signal-500: #0FB868;
  --color-signal-600: #0A8E4F;
  --color-signal-700: #066138;
  --color-signal-900: #032118;

  /* Amber — accent */
  --color-amber-100: #FFE7B3;
  --color-amber-200: #FFD27A;
  --color-amber-300: #FFB020;   /* accent */
  --color-amber-400: #E8980A;
  --color-amber-500: #B87600;
  --color-amber-900: #2E1C00;

  /* Semantic primitives */
  --color-red-300:   #FF6B6B;
  --color-red-500:   #E02B2B;
  --color-red-900:   #2B0808;
  --color-yellow-300:#FFD84D;
  --color-yellow-500:#D6A900;
  --color-blue-300:  #7AB8FF;   /* info only — NOT primary */
  --color-blue-500:  #2F7FE0;
  --color-blue-900:  #0A1F3D;

  /* Alpha strokes (for borders over dark surfaces) */
  --alpha-line-weak:    rgba(255, 255, 255, 0.06);
  --alpha-line:         rgba(255, 255, 255, 0.10);
  --alpha-line-strong:  rgba(255, 255, 255, 0.16);
  --alpha-highlight:    rgba(255, 255, 255, 0.04);
  --alpha-overlay:      rgba(7, 9, 13, 0.82);

  /* -----------------------------------------------------------
     LAYER 2 — SEMANTIC (purpose-named — use these in components)
     ----------------------------------------------------------- */

  /* Surfaces */
  --bg:                var(--color-ink-100);
  --surface:           var(--color-ink-200);
  --elevated:          var(--color-ink-300);
  --surface-inset:     var(--color-ink-50);

  /* Foreground text */
  --fg1:               var(--color-ink-900);
  --fg2:               var(--color-ink-800);
  --fg3:               var(--color-ink-700);
  --fg-on-primary:     var(--color-ink-50);
  --fg-on-accent:      var(--color-ink-50);

  /* Brand */
  --primary:           var(--color-signal-300);
  --primary-hover:     var(--color-signal-200);
  --primary-press:     var(--color-signal-400);
  --primary-faint:     rgba(94, 243, 163, 0.12);
  --primary-glow:      rgba(94, 243, 163, 0.35);

  --accent:            var(--color-amber-300);
  --accent-hover:      var(--color-amber-200);
  --accent-press:      var(--color-amber-400);
  --accent-faint:      rgba(255, 176, 32, 0.12);

  /* Semantic status */
  --success:           var(--color-signal-300);
  --success-faint:     rgba(94, 243, 163, 0.10);
  --warning:           var(--color-amber-300);
  --warning-faint:     rgba(255, 176, 32, 0.10);
  --error:             var(--color-red-300);
  --error-faint:       rgba(255, 107, 107, 0.10);
  --info:              var(--color-blue-300);
  --info-faint:        rgba(122, 184, 255, 0.10);

  /* Borders */
  --border:            var(--alpha-line-weak);
  --border-strong:     var(--alpha-line);
  --border-focus:      var(--color-signal-300);

  /* Typography — ver brand/brand.css para @font-face
     Display: DejaVu Sans (logo-consistent, 500/700)
     Body:    Public Sans (UI grotesque, 400/500/600)
     Mono:    DejaVu Sans Mono (métricas, status, kicker) */
  --font-display:      var(--brand-font-display);
  --font-body:         var(--brand-font-body);
  --font-mono:         var(--brand-font-mono);

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  64px;
  --text-6xl:  88px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-mono:    0.08em;     /* for uppercase mono labels */

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

  /* Spacing — 4px base */
  --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;

  /* Radii */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Shadows — subtle in dark UI */
  --shadow-none:    none;
  --shadow-card:    inset 0 1px 0 var(--alpha-highlight), 0 8px 24px -12px rgba(0,0,0,0.6);
  --shadow-elevated:inset 0 1px 0 var(--alpha-line), 0 18px 48px -20px rgba(0,0,0,0.8);
  --shadow-glow:    0 0 0 1px var(--primary-glow), 0 0 24px -4px var(--primary-glow);
  --shadow-focus:   0 0 0 2px var(--bg), 0 0 0 4px var(--primary);

  /* Motion */
  --ease:            cubic-bezier(0.2, 0, 0, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:         cubic-bezier(0.6, 0, 1, 1);
  --dur-1:           80ms;
  --dur-2:           120ms;
  --dur-3:           240ms;
  --dur-4:           480ms;
  --dur-5:           800ms;

  /* Layout */
  --maxw-content: 1240px;
  --grid-size:    32px;           /* signature bg grid */

  /* -----------------------------------------------------------
     LAYER 3 — COMPONENT (resolves to semantics — overridable)
     ----------------------------------------------------------- */

  /* Buttons */
  --button-primary-bg:         var(--primary);
  --button-primary-fg:         var(--fg-on-primary);
  --button-primary-bg-hover:   var(--primary-hover);
  --button-primary-bg-press:   var(--primary-press);

  --button-secondary-bg:       var(--surface);
  --button-secondary-fg:       var(--fg1);
  --button-secondary-border:   var(--border-strong);
  --button-secondary-bg-hover: var(--elevated);

  --button-ghost-fg:           var(--fg2);
  --button-ghost-fg-hover:     var(--fg1);
  --button-ghost-bg-hover:     var(--alpha-highlight);

  --button-destructive-bg:     var(--error);
  --button-destructive-fg:     var(--fg-on-primary);

  --button-radius:             var(--radius-md);
  --button-height:             36px;
  --button-height-lg:          44px;

  /* Cards */
  --card-bg:                   var(--surface);
  --card-bg-highlighted:       var(--elevated);
  --card-border:               var(--border);
  --card-border-hover:         var(--border-strong);
  --card-radius:               var(--radius-lg);
  --card-padding:              var(--space-6);
  --card-shadow:               var(--shadow-card);

  /* Inputs */
  --input-bg:                  var(--surface-inset);
  --input-fg:                  var(--fg1);
  --input-placeholder:         var(--fg3);
  --input-border:              var(--border-strong);
  --input-border-focus:        var(--primary);
  --input-radius:              var(--radius-md);
  --input-height:              40px;

  /* Badges */
  --badge-radius:              var(--radius-sm);

  /* Nav */
  --nav-bg:                    rgba(7, 9, 13, 0.72);
  --nav-bg-solid:              var(--bg);
  --nav-border:                var(--border);
  --nav-height:                64px;

  /* Metric display */
  --metric-number-size:        var(--text-4xl);
  --metric-number-weight:      var(--weight-semi);
  --metric-label-size:         var(--text-xs);
  --metric-label-tracking:     var(--tracking-mono);
}

/* ===========================================================
   BASE TYPOGRAPHY — semantic element defaults
   =========================================================== */

html {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern', 'liga';
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);            /* DejaVu Sans 700 no display */
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

/* DejaVu Sans runs wider than grotesques; tracking is slightly
   less aggressive than Plex/Inter to let the letterforms breathe. */
h1 { font-size: var(--text-5xl); letter-spacing: -0.022em; font-weight: 700; }
h2 { font-size: var(--text-4xl); letter-spacing: -0.018em; font-weight: 700; }
h3 { font-size: var(--text-3xl); letter-spacing: -0.015em; font-weight: 700; }
h4 { font-size: var(--text-2xl); letter-spacing: -0.010em; font-weight: 500; }
h5 { font-size: var(--text-xl);  letter-spacing: -0.006em; font-weight: 500; }
h6 { font-size: var(--text-lg);  letter-spacing: -0.002em; font-weight: 500; }

p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--fg2);
  line-height: var(--leading-loose);
  text-wrap: pretty;
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'zero', 'ss02';
}

.eyebrow,
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--fg3);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'zero';
}

a {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-2) var(--ease);
}
a:hover { text-decoration-color: var(--primary); }

::selection { background: var(--primary); color: var(--fg-on-primary); }

/* Utility: signature grid background */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--alpha-highlight) 1px, transparent 1px),
    linear-gradient(to bottom, var(--alpha-highlight) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}