/* ============================================================
   INVOISYS DESIGN SYSTEM — colors_and_type.css
   Brand Manual 2026 v2.0
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Thin.ttf') format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Extralight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Semibold.woff2') format('woff2'),
       url('fonts/Matteo-Semibold.woff') format('woff'),
       url('fonts/Matteo-Semibold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-SemiboldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-Bold.woff2') format('woff2'),
       url('fonts/Matteo-Bold.woff') format('woff'),
       url('fonts/Matteo-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Matteo';
  src: url('fonts/Matteo-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Spartan MB';
  src: url('fonts/SpartanMB-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spartan MB';
  src: url('fonts/SpartanMB-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spartan MB';
  src: url('fonts/SpartanMB-Regular.woff2') format('woff2'),
       url('fonts/SpartanMB-Regular.woff') format('woff'),
       url('fonts/SpartanMB-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spartan MB';
  src: url('fonts/SpartanMB-SemiBold.woff2') format('woff2'),
       url('fonts/SpartanMB-SemiBold.woff') format('woff'),
       url('fonts/SpartanMB-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spartan MB';
  src: url('fonts/SpartanMB-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spartan MB';
  src: url('fonts/SpartanMB-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ── COLOR TOKENS ───────────────────────────────────────────── */
:root {
  /* Brand */
  --color-brand:        #733FEB;
  --color-brand-dark:   #5A2FD4;
  --color-brand-light:  #9B6FF5;
  --color-brand-pale:   #EDE5FF;

  /* Accents */
  --color-accent-mint:  #00D4AA;
  --color-accent-amber: #F5A623;

  /* Dark backgrounds */
  --bg-base:            #0F0C1E;
  --bg-surface:         #1A1535;
  --bg-elevated:        #2A2250;

  /* Gray scale */
  --gray-700:           #4A3E6B;
  --gray-500:           #8B7DC0;
  --gray-300:           #C4B8F0;
  --gray-100:           #F5F3FF;

  /* Text */
  --text-primary:       #FFFFFF;
  --text-secondary:     #C4B8F0;
  --text-tertiary:      #8B7DC0;
  --text-dark:          #0F0C1E;

  /* Border */
  --border-subtle:      #4A3E6B;

  /* Semantic states */
  --color-success:      #00D4AA;
  --color-warning:      #F5A623;
  --color-error:        #FF4444;
  --color-info:         #733FEB;

  /* Gradients */
  --gradient-hero:      linear-gradient(135deg, #0F0C1E 0%, #1A1535 50%, #2A2250 100%);
  --gradient-brand:     linear-gradient(135deg, #5A2FD4 0%, #733FEB 100%);
  --gradient-accent:    linear-gradient(135deg, #733FEB 0%, #00D4AA 100%);

  /* Border radii */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-full:        9999px;

  /* Shadows */
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow-brand:  0 0 30px rgba(115, 63, 235, 0.4);
  --shadow-glow-mint:   0 0 24px rgba(0, 212, 170, 0.3);

  /* Glassmorphism */
  --glass-bg:           rgba(255, 255, 255, 0.06);
  --glass-border:       rgba(255, 255, 255, 0.1);

  /* Transitions */
  --transition-fast:    all 200ms ease-out;
  --transition-mid:     all 300ms ease-in-out;

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

  /* Font families */
  --font-display:  'Matteo', 'Georgia', serif;
  --font-body:     'Spartan MB', 'Arial', sans-serif;
}

/* ── SEMANTIC TYPOGRAPHY ────────────────────────────────────── */

/* H1 Display — Hero titles */
.h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* H2 — Section titles */
.h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-wrap: pretty;
}

/* H3 — Sub-section titles */
.h3, h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--color-brand-light);
}

/* Body text */
.body, p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* UI Label / Caption */
.label, .caption {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--color-accent-mint);
}

/* Button text */
.btn-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── CORE BUTTON STYLES ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  transition: var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-brand), var(--shadow-md);
}
.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.btn-secondary:hover {
  border-color: var(--color-brand-light);
  color: var(--color-brand-light);
}

.btn-ghost {
  background: transparent;
  color: var(--color-brand-light);
}
.btn-ghost:hover {
  color: var(--color-brand);
}

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-brand);
}

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-brand   { background: rgba(115,63,235,0.18); color: var(--color-brand-light); border: 1px solid rgba(115,63,235,0.3); }
.badge-mint    { background: rgba(0,212,170,0.14);  color: var(--color-accent-mint); border: 1px solid rgba(0,212,170,0.25); }
.badge-amber   { background: rgba(245,166,35,0.14); color: var(--color-accent-amber); border: 1px solid rgba(245,166,35,0.25); }
.badge-error   { background: rgba(255,68,68,0.14);  color: var(--color-error);        border: 1px solid rgba(255,68,68,0.25); }