/*
 * SKOPIA Design System — Colors & Typography
 * Source: skopia-brand-manual.html (April 2026, v1.0)
 * Fonts via Google Fonts: Montserrat, Open Sans, JetBrains Mono
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Open+Sans:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* Scale landing page to 75% — matches intended design viewport. */
html { zoom: 0.75; }

/* ─────────────────────────────────────────
   BRAND COLOR TOKENS
───────────────────────────────────────── */
:root {
  /* Primary Gradient (cyan → periwinkle → royal blue) */
  --color-grad-start:   #1EC8D4;   /* Cyan */
  --color-grad-mid:     #4A6FE8;   /* Periwinkle Blue */
  --color-grad-end:     #2A4DCC;   /* Royal Blue */
  --color-grad:         linear-gradient(135deg, #1EC8D4, #4A6FE8, #2A4DCC);
  --color-grad-90:      linear-gradient(90deg,  #1EC8D4, #4A6FE8, #2A4DCC);

  /* Product Tier Gradients */
  --color-grad-lens:    linear-gradient(135deg, #1EC8D4, #3AACE0);
  --color-grad-track:   linear-gradient(135deg, #3AACE0, #4A6FE8);
  --color-grad-build:   linear-gradient(135deg, #4A6FE8, #2A4DCC);

  /* Neutrals */
  --color-white:        #FFFFFF;
  --color-charcoal:     #1E1E1E;
  --color-bg-light:     #F7F8FC;
  --color-bg-subtle:    #FAFBFE;
  --color-border:       #E2E6F0;
  --color-border-dark:  rgba(255,255,255,0.15);

  /* Text */
  --color-text-primary: #1A1A2E;
  --color-text-muted:   #6B7280;
  --color-text-on-dark: rgba(255,255,255,0.9);
  --color-text-dim:     rgba(255,255,255,0.5);

  /* Semantic / Status */
  --color-success:      #16A34A;
  --color-success-bg:   #F0FFF4;
  --color-success-border: #86EFAC;
  --color-error:        #DC2626;
  --color-error-bg:     #FFF5F5;
  --color-error-border: #FECACA;
  --color-warning:      #854D0E;
  --color-warning-bg:   #FEF9C3;
  --color-info:         #1E40AF;
  --color-info-bg:      #EFF6FF;
  --color-info-border:  #3B82F6;

  /* Table / surface */
  --color-table-header: #F1F3FA;

/* ─────────────────────────────────────────
   TYPOGRAPHY TOKENS
───────────────────────────────────────── */
  --font-head: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-body: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Scale */
  --text-h1:     clamp(36px, 5vw, 48px);
  --text-h2:     clamp(22px, 3vw, 28px);
  --text-h3:     clamp(16px, 2vw, 18px);
  --text-body:   15px;
  --text-small:  13px;
  --text-caption:12px;
  --text-label:  10px;
  --text-data:   13px;

  /* Line heights */
  --lh-heading:  1.1;
  --lh-body:     1.7;
  --lh-ui:       1.4;

  /* Letter spacing */
  --ls-tight:    -1px;
  --ls-label:    3px;
  --ls-caps:     1.5px;

/* ─────────────────────────────────────────
   SPACING & LAYOUT
───────────────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    40px;
  --space-2xl:   56px;

  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;
  --radius-circle: 50%;

/* ─────────────────────────────────────────
   SHADOWS & ELEVATION
───────────────────────────────────────── */
  --shadow-card:   0 2px 12px rgba(0,0,0,0.06);
  --shadow-logo:   0 8px 32px rgba(42,110,220,0.35);
  --shadow-panel:  0 4px 24px rgba(0,0,0,0.12);

/* ─────────────────────────────────────────
   GRADIENT BAR (6px accent strip)
───────────────────────────────────────── */
  --grad-bar-height: 6px;
}

/* ─────────────────────────────────────────
   SEMANTIC TYPE CLASSES
───────────────────────────────────────── */
.sk-h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: var(--text-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

.sk-h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.sk-h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-h3);
  color: var(--color-text-primary);
}

.sk-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

.sk-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.sk-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sk-data {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-data);
  color: var(--color-grad-start);
}

.sk-grad-text {
  background: var(--color-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────── */
.sk-grad-bar {
  height: var(--grad-bar-height);
  background: var(--color-grad-90);
}

.sk-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.sk-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.sk-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-grad);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.sk-btn-primary:hover { opacity: 0.9; }
.sk-btn-primary:active { transform: scale(0.98); }

.sk-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-grad-mid);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  border: 1.5px solid var(--color-grad-mid);
  cursor: pointer;
  transition: background 0.15s ease;
}
.sk-btn-secondary:hover { background: rgba(74,111,232,0.08); }

.sk-dark-surface {
  background: var(--color-charcoal);
  color: var(--color-text-on-dark);
}