/* ============================================================
   GLX Studio — Colors & Type
   Source: Figma MVP library (file am3KbhXAy2xgGZApWhDIvv)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

:root {
  /* ---- Surface ---- */
  --surface-primary:   #0D0D0D;   /* Page background */
  --surface-secondary: #171717;   /* Nav background · Elevation 1 */
  --surface-tertiary:  #242424;   /* State fills, outlines, dropdowns · Elevation 2 */
  --surface-info:      #4A4A4A;
  --surface-action:    #6FFFE9;   /* Primary CTA */
  --surface-alert:     #B9B955;

  /* ---- Text ---- */
  --text-standard:  #E4EAF1;      /* L1 primary font (dark mode) */
  --text-secondary: #898C91;      /* L2 muted font */
  --text-inverse:   #040507;      /* Text on action / light surfaces */
  --text-l1-light:  #101720;      /* L1 primary font (light mode) */

  /* ---- Icon ---- */
  --icon-standard:  #E4EAF1;
  --icon-secondary: #898C91;
  --icon-active:    #59CCBA;

  /* ---- Accent (indigo family) ---- */
  --accent-light:   #7E9DE7;
  --accent-primary: #5556B9;      /* Banners, selected states */
  --accent-hover:   #3B3C82;
  --secondary-blue: #4EA8DE;

  /* ---- Gray ramp ---- */
  --gray-100: #FCFCFC;
  --gray-200: #F2F2F2;
  --gray-300: #D9D9D9;
  --gray-400: #BFBFBF;
  --gray-450: #A6A6A6;
  --gray-500: #8C8C8C;
  --gray-600: #737373;
  --gray-700: #595959;
  --gray-800: #404040;
  --gray-900: #262626;

  /* ---- Green / teal ramp (primary brand ramp) ---- */
  --green-050: #F3FBFA;
  --green-100: #CCEFEA;
  --green-200: #A5E3DA;
  --green-300: #7ED7C9;
  --green-400: #59CCBA;   /* Icon active, success */
  --green-500: #38B7A3;
  --green-600: #2C9081;
  --green-700: #20695E;
  --green-800: #14423B;
  --green-900: #081B18;

  /* ---- Blue ramp (elevation + deep state fills) ---- */
  --blue-050: #E4EAF1;    /* = text-standard */
  --blue-100: #C3D0DF;
  --blue-200: #A2B5CD;
  --blue-300: #819BBB;
  --blue-400: #6081A9;
  --blue-500: #4B688B;
  --blue-600: #3A506B;
  --blue-700: #273649;
  --blue-800: #161E28;
  --blue-900: #040507;

  /* ---- Radius ---- */
  --radius-xs: 4px;     /* Tags, dropdown rows, tooltips */
  --radius-sm: 8px;     /* Banners, cards, inputs */
  --radius-md: 12px;
  --radius-lg: 16px;    /* Pill buttons (fully rounded at 32px height) */
  --radius-pill: 999px;

  /* ---- Spacing scale (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;

  /* ---- Shadow system ---- */
  --shadow-soft:    0 2px 4px rgba(0,0,0,0.05);
  --shadow-tooltip: 0 16px 24px rgba(0,0,0,0.10), 0 6px 8px rgba(0,0,0,0.05);
  --shadow-menu:    0 16px 24px rgba(0,0,0,0.30), 0 6px 8px rgba(0,0,0,0.20);

  /* ---- Type ---- */
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  /* Line-height shared across the scale */
  --lh-tight: 1.4;

  /* Type tokens */
  --fs-h1: 32px;  --fw-h1: 700;
  --fs-h2: 24px;  --fw-h2: 700;
  --fs-h3: 20px;  --fw-h3: 600;
  --fs-body-bold:   16px; --fw-body-bold:   700;
  --fs-body-medium: 16px; --fw-body-medium: 500;
  --fs-body-small:  14px; --fw-body-small:  400;
  --fs-body-small-bold: 14px; --fw-body-small-bold: 700;
  --fs-eyebrow: 12px;  --fw-eyebrow: 600;
  --fs-eyebrow-sm: 10px; --fw-eyebrow-sm: 600;
  --ls-eyebrow: 0.05em;
}

/* ============ Semantic element defaults ============ */
html, body {
  background: var(--surface-primary);
  color: var(--text-standard);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-tight); margin: 0; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-tight); margin: 0; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-tight); margin: 0; }
p  { font-size: var(--fs-body-medium); font-weight: var(--fw-body-medium); line-height: var(--lh-tight); margin: 0; color: var(--text-standard); }
small, .body-small { font-size: var(--fs-body-small); font-weight: var(--fw-body-small); line-height: var(--lh-tight); }
code, pre { font-family: var(--font-mono); }

/* ============ Utility type classes ============ */
.h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-tight); }
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-tight); }
.body-bold       { font-size: 16px; font-weight: 700; line-height: var(--lh-tight); }
.body-medium     { font-size: 16px; font-weight: 500; line-height: var(--lh-tight); }
.body-small      { font-size: 14px; font-weight: 400; line-height: var(--lh-tight); }
.body-small-bold { font-size: 14px; font-weight: 700; line-height: var(--lh-tight); }
.eyebrow-label   { font-size: 12px; font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.eyebrow-small   { font-size: 10px; font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* ============ Commonly re-used primitives ============ */
.glx-btn-primary {
  background: var(--surface-action);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  height: 32px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.glx-btn-primary:hover { background: var(--green-300); }
.glx-btn-primary:active { background: var(--green-500); }

.glx-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--surface-tertiary);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.glx-btn-secondary:hover { border-color: var(--icon-active); color: var(--icon-active); }

.glx-card {
  background: var(--surface-secondary);
  border: 1px solid var(--surface-tertiary);
  border-radius: var(--radius-sm);
}

.glx-input {
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-tertiary);
  background: transparent;
  color: var(--text-standard);
  padding: 0 8px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.glx-input::placeholder { color: var(--text-secondary); }
.glx-input:focus { outline: none; border-color: var(--text-standard); }