:root {
  --font-display:        'Space Grotesk', sans-serif;
  --font-title:          'Space Grotesk', sans-serif;
  --font-body:           'Roboto', sans-serif;
  --font-text:           'Roboto', sans-serif;
  --texto:               'Roboto', sans-serif;

  --green:              #2ee88a;
  --green-20:           rgba(46, 232, 138, 0.2);
  --green-40:           rgba(46, 232, 138, 0.4);
  --green-60:           rgba(46, 232, 138, 0.6);
  --green-85:           rgba(46, 232, 138, 0.85);
  --cta-text:           #006413;
  --cta-text-80:        rgba(0, 100, 19, 0.8);

  --color-accent-60:           rgba(46, 232, 138, 0.6);
  --color-role-text:           #006413;
  --color-danger-bg:           rgba(159, 5, 25, 0.05);
  --color-danger-border:       rgba(255, 113, 108, 0.3);

  --bg:           #0e0e0e;
  --surface:      #1a1919;
  --surface-2:    #222222;
  --surface-3:    #131313;
  --muted:        #b4b4b4;
  --white:        #ffffff;
  --black:        #000000;
}


html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0e0e0e;
  --surface: #1a1919;
  --surface-2: #222222;
  --surface-3: #131313;
  --muted: #b4b4b4;
  --white: #ffffff;
  --color-bg: #0e0e0e;
  --color-card: #131313;
  --color-surface: #262626;
  --color-border: rgba(73, 72, 71, 0.3);
  --color-border-soft: rgba(180, 180, 180, 0.1);
  --color-accent: #2ee88a;
  --color-text: #ffffff;
  --color-muted: #b4b4b4;
  --color-danger: #d7383b;
  --skeleton-start: #1c1c2e;
  --skeleton-mid: #252538;
  --skeleton-end: #1c1c2e;
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e5e7eb;
  --muted: #6b7280;
  --white: #ffffff;
  --color-bg: #f8fafc;
  --color-card: #ffffff;
  --color-surface: #f3f4f6;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-soft: rgba(15, 23, 42, 0.08);
  --color-accent: #000000;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-danger: #b91c1c;
  --color-danger-bg: rgba(248, 113, 113, 0.12);
  --skeleton-start: #e9eef2;
  --skeleton-mid: #edf2f7;
  --skeleton-end: #e9eef2;
  --green: #2ee88a;
  
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

body {
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: rgba(46, 232, 138, 0.3);
}
:root {
  --header-h: 5.5rem;
}

@media (max-width: 48rem) {
  :root {
    --header-h: 4rem;
  }
}