/* ============================================================
   ORBIS SYSTEMS — Core CSS Tokens
   Colors, typography, spacing, radii, shadows, motion.
   Source of truth: assets/orbis-brand-guide.html
   Use in HTML: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* Webfonts: Instrument Sans + DM Sans (no .ttf in repo — Google Fonts) */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- BRAND PURPLE SCALE ---------- */
  --purple-50:  #F5F3FF;   /* Tint                       */
  --purple-100: #EDE9FE;
  --purple-200: #DDD6FE;
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;   /* Soft Lavender              */
  --purple-500: #8B5CF6;   /* Bright Purple              */
  --purple-600: #7C3AED;   /* Primary Purple ★            */
  --purple-700: #6D28D9;   /* Deep Violet                */
  --purple-800: #5B21B6;
  --purple-900: #4C1D95;   /* Dark Indigo                */

  /* Secondary accent — indigo (used in landing page gradients) */
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-950: #1E1B4B;

  /* ---------- NEUTRALS ---------- */
  --ink:           #0C0714;   /* Ink Black — dark bg            */
  --ink-surface:   #150F22;   /* Dark surface — cards on dark   */
  --ink-elevated: #1A1428;
  --ink-1A:       #1A1625;    /* near-black body text          */

  --gray-50:  #FAFAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ---------- SEMANTIC COLORS (light theme) ---------- */
  --bg:             #FFFFFF;
  --bg-subtle:      #FAFAFB;
  --bg-muted:       var(--gray-100);
  --surface:        #FFFFFF;
  --surface-elev:   #FFFFFF;

  --fg:             var(--ink-1A);
  --fg-muted:       var(--gray-600);
  --fg-subtle:      var(--gray-400);
  --fg-on-brand:    #FFFFFF;

  --border:         rgba(0, 0, 0, 0.08);
  --border-strong:  var(--gray-200);
  --border-brand:   var(--purple-200);

  --brand:          var(--purple-600);
  --brand-hover:    var(--purple-700);
  --brand-soft:     var(--purple-50);
  --brand-fg:       #FFFFFF;

  /* status */
  --success:        #10B981;
  --success-soft:   #ECFDF5;
  --warning:        #F59E0B;
  --warning-soft:   #FFFBEB;
  --danger:         #EF4444;
  --danger-soft:    #FEF2F2;
  --info:           var(--indigo-500);

  /* ---------- BRAND GRADIENTS ---------- */
  --grad-brand:     linear-gradient(90deg, var(--indigo-600), var(--purple-600));
  --grad-brand-deep:linear-gradient(135deg, var(--purple-500), var(--purple-900));
  --grad-text:      linear-gradient(90deg, var(--indigo-600), var(--purple-600));
  --grad-text-soft: linear-gradient(90deg, var(--indigo-400), var(--purple-400));
  --grad-hero-bg:   linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.7) 50%, rgba(238,242,255,0.5) 100%);
  --grad-cta-dark:  linear-gradient(135deg, #111827 0%, var(--indigo-950) 50%, #2E1065 100%);

  /* Rainbow keyframe palette (RainbowButton) */
  --color-1: #4F46E5;
  --color-2: #7C3AED;
  --color-3: #6366F1;
  --color-4: #8B5CF6;
  --color-5: #6D28D9;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Type scale — landing page is responsive but these are tablet/desktop defaults */
  --fs-display-1: clamp(48px, 7vw, 96px);  /* hero */
  --fs-display-2: clamp(36px, 5vw, 64px);  /* section H2 */
  --fs-h1:        clamp(32px, 4vw, 48px);
  --fs-h2:        clamp(24px, 3vw, 36px);
  --fs-h3:        20px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-eyebrow:   11px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-relaxed: 1.625;

  --tracking-eyebrow: 0.15em;  /* "01 — PRIMARY LOGO" */
  --tracking-logo:    0.22em;  /* "SYSTEMS" subtitle  */
  --tracking-tight:   -0.02em; /* big display heads   */

  /* ---------- SPACING (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;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:    0 12px 32px -8px rgba(15, 23, 42, 0.12);
  --shadow-xl:    0 24px 56px -12px rgba(15, 23, 42, 0.18);
  --shadow-brand: 0 12px 32px -8px rgba(124, 58, 237, 0.30);
  --shadow-brand-lg: 0 24px 56px -12px rgba(124, 58, 237, 0.40);
  --ring-brand:   0 0 0 3px rgba(124, 58, 237, 0.25);

  /* Soft blurred orbs are the brand's signature background motif */
  --blur-orb: blur(80px);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   180ms;
  --dur-base:   260ms;
  --dur-slow:   420ms;
}

/* ============================================================
   DARK SURFACES (used inside CTA banner, navbars on dark)
   Not a true dark mode — landing page is light. These tokens
   are scoped: opt in by adding class="on-dark" to a container.
   ============================================================ */
.on-dark {
  --bg:           var(--ink);
  --bg-subtle:    var(--ink-surface);
  --bg-muted:     var(--ink-elevated);
  --surface:      var(--ink-surface);
  --fg:           #FFFFFF;
  --fg-muted:     rgba(255, 255, 255, 0.70);
  --fg-subtle:    rgba(255, 255, 255, 0.45);
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.16);
  --brand:        var(--purple-400);
  --brand-hover:  var(--purple-300);
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: 0; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); letter-spacing: 0; }

p { margin: 0; line-height: var(--lh-relaxed); color: var(--fg-muted); }

a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-hover); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

::selection { background: var(--purple-200); color: var(--ink-1A); }

/* ============================================================
   UTILITY CLASSES — reusable patterns
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-soft {
  background: var(--grad-text-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

.surface-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}