/* ==========================================================================
   Diamond Mail — Design Tokens
   Colors & Typography
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Primary: abcDiatype (proprietary) → substituted with Inter Tight (Google)
   Monospace: JetBrains Mono (free, Google Fonts)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Color: Primary / Brand ---------- */
  --color-cobalt:           #0007cd;   /* Composio Cobalt — deep brand blue */
  --color-signal-blue:      #0089ff;   /* Interactive borders, focus rings */
  --color-ocean-blue:       #0096ff;   /* CTA accent border */
  --color-electric-cyan:    #00ffff;   /* High-signal accent — glows */
  --color-cyan-12:          rgba(0, 255, 255, 0.12); /* Glowing fill */
  --color-cyan-20:          rgba(0, 255, 255, 0.20);

  /* ---------- Color: Surface / Background ---------- */
  --color-void:             #0f0f0f;   /* Page background */
  --color-pure-black:       #000000;   /* Card interiors, deep nests */
  --color-charcoal:         #2c2c2c;   /* Secondary borders, dividers */

  /* ---------- Color: Neutrals / Text ---------- */
  --color-white:            #ffffff;
  --color-muted-smoke:      #444444;   /* De-emphasized body */
  --color-light-border:     #e0e0e0;   /* Reserved: light-surface contexts */

  --color-ghost-white:      rgba(255, 255, 255, 0.60); /* Secondary text */
  --color-whisper-white:    rgba(255, 255, 255, 0.50); /* Tertiary text */
  --color-phantom-white:    rgba(255, 255, 255, 0.20); /* Receded chrome */

  /* ---------- Color: Border Mist (opacity-based borders) ---------- */
  --border-mist-04:         rgba(255, 255, 255, 0.04);
  --border-mist-06:         rgba(255, 255, 255, 0.06);
  --border-mist-08:         rgba(255, 255, 255, 0.08);
  --border-mist-10:         rgba(255, 255, 255, 0.10);
  --border-mist-12:         rgba(255, 255, 255, 0.12);

  /* ---------- Semantic foregrounds ---------- */
  --fg-primary:             var(--color-white);
  --fg-secondary:           var(--color-ghost-white);
  --fg-tertiary:            var(--color-whisper-white);
  --fg-muted:               var(--color-muted-smoke);
  --fg-accent:              var(--color-electric-cyan);
  --fg-brand:               var(--color-cobalt);

  /* ---------- Semantic backgrounds ---------- */
  --bg-page:                var(--color-void);
  --bg-card:                var(--color-pure-black);
  --bg-subtle:              var(--color-void);
  --bg-elevated:            #151515;

  /* ---------- Semantic borders ---------- */
  --border-subtle:          var(--border-mist-06);
  --border-default:         var(--border-mist-10);
  --border-prominent:       var(--border-mist-12);
  --border-focus:           var(--color-signal-blue);

  /* ---------- Gradients ---------- */
  --gradient-cyan-glow:     radial-gradient(circle at center, rgba(0, 255, 255, 0.18) 0%, rgba(0, 255, 255, 0) 60%);
  --gradient-blue-to-black: linear-gradient(180deg, #0007cd 0%, #0f0f0f 100%);
  --gradient-white-fog:     linear-gradient(180deg, #0f0f0f 0%, rgba(200, 200, 210, 0.35) 100%);

  /* ---------- Shadows ---------- */
  --shadow-brutalist:       rgba(0, 0, 0, 0.15) 4px 4px 0 0;
  --shadow-brutalist-cyan:  rgba(0, 255, 255, 0.20) 4px 4px 0 0;
  --shadow-float:           rgba(0, 0, 0, 0.50) 0 8px 32px;
  --shadow-card:            rgba(0, 0, 0, 0.35) 0 2px 8px;

  /* ---------- Radii ---------- */
  --radius-precise:         2px;   /* Inline code, tags */
  --radius-card:            4px;   /* Cards, containers, images */
  --radius-pill:            37px;  /* Select CTAs, badges */
  --radius-round:           9999px;

  /* ---------- Spacing (8px base, extended scale) ---------- */
  --space-1:  1px;
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;

  /* ---------- Typography: families ---------- */
  --font-sans:  'Inter Tight', 'abcDiatype Fallback', ui-sans-serif, system-ui,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono:  'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace,
                SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
                'Courier New', monospace;

  /* ---------- Typography: scale ---------- */
  --text-display:         64px;
  --text-section:         48px;
  --text-subhead-lg:      40px;
  --text-subhead:         28px;
  --text-card-title:      24px;
  --text-feature-label:   20px;
  --text-body-lg:         18px;
  --text-body:            16px;
  --text-body-sm:         15px;
  --text-caption:         14px;
  --text-label:           13px;
  --text-tag:             12px;
  --text-micro:           11px;
  --text-nano:            10px;

  /* ---------- Typography: line-heights ---------- */
  --lh-compressed: 0.87;   /* display */
  --lh-tight:      1.00;   /* section headings */
  --lh-snug:       1.20;   /* sub-heads, card titles */
  --lh-normal:     1.50;   /* body, code */
  --lh-relaxed:    1.63;   /* long-form body */
  --lh-mono-caption: 1.43;
  --lh-mono-micro:   1.33;
}

/* ==========================================================================
   Base / semantic element styles
   ========================================================================== */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--lh-compressed);
  letter-spacing: normal;
  color: var(--fg-primary);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--fg-primary);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-subhead-lg);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--fg-primary);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-card-title);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--text-feature-label);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
  margin: 0;
}

.body-lg   { font-size: var(--text-body-lg);  line-height: var(--lh-snug); }
.body-sm   { font-size: var(--text-body-sm);  line-height: var(--lh-relaxed); }
.caption   { font-size: var(--text-caption);  line-height: var(--lh-relaxed); color: var(--fg-secondary); }
.label     { font-size: var(--text-label);    font-weight: 500; line-height: var(--lh-normal); }

.overline {
  font-family: var(--font-sans);
  font-size: var(--text-tag);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  letter-spacing: -0.32px;
  color: var(--fg-primary);
}

.code-sm   { font-size: var(--text-caption); letter-spacing: -0.28px; }
.code-tag  { font-size: var(--text-tag);     letter-spacing: -0.28px; }
.code-overline {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--lh-mono-caption);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.code-micro {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--lh-mono-micro);
  letter-spacing: 0.55px;
  text-transform: uppercase;
}