/* ============================================================
   MORT AI SOLUTIONS — Design Tokens
   Colors, typography, spacing, shadows, radii
   ============================================================ */

/* ------- Heading: Mokoto (unavailable in free/Google Fonts) --
   Substituting Orbitron (geometric, tech-forward, condensed-ish)
   as a close free alternative. Replace with Mokoto.ttf when
   licensed; see fonts/README.md.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* ========== COLORS ==========
     The Mort AI palette is strictly controlled. Cyan is the signature,
     used SPARINGLY (≤10% of any layout). Navy dominates (~60%). */

  /* Primary — The Signature */
  --cyan:         #00E7DF;
  --cyan-hover:   #2af0e9;   /* +lightness */
  --cyan-press:   #00bdb5;   /* −lightness */
  --cyan-glow:    rgba(0, 231, 223, 0.35);
  --cyan-subtle:  rgba(0, 231, 223, 0.08);
  --cyan-line:    rgba(0, 231, 223, 0.18);

  /* Secondary — The Backbone */
  --navy:         #003A4D;
  --navy-deep:    #002533;
  --navy-darker:  #001A26;
  --navy-black:   #000000;   /* preferred deck background */

  /* Semantic */
  --danger:       #EF4444;   /* urgency / warnings only */
  --success:      #2CF576;   /* money / success only */

  /* Neutrals */
  --white:        #FFFFFF;
  --black:        #000000;
  --grey-900:     #111418;
  --grey-700:     #374151;
  --grey-600:     #6B7280;
  --grey-500:     #9CA3AF;
  --grey-400:     #9CA3AF;
  --grey-300:     #D1D5DB;
  --grey-200:     #E5E7EB;
  --grey-100:     #F3F4F6;

  /* ========== SEMANTIC ALIASES ==========
     Prefer these in product code so roles are obvious. */
  --bg:           var(--navy-black);          /* default page bg */
  --bg-surface:   var(--navy-deep);           /* cards, panels */
  --bg-elevated: var(--navy);                 /* raised surface */
  --bg-subtle:    rgba(255, 255, 255, 0.02);

  --fg:           var(--white);               /* default text on dark */
  --fg-muted:     var(--grey-300);
  --fg-subtle:    var(--grey-400);
  --fg-faint:     var(--grey-600);
  --fg-inverse:   var(--black);               /* on light bg */

  --accent:       var(--cyan);
  --accent-fg:    var(--navy-deep);           /* text on cyan btn */

  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.16);
  --border-accent:var(--cyan-line);

  /* ========== TYPOGRAPHY ========== */
  --font-heading: 'Orbitron', 'Rajdhani', 'Montserrat', sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* Scale (desktop baseline) */
  --text-hero:    clamp(48px, 8vw, 96px);
  --text-h1:      clamp(36px, 5vw, 52px);
  --text-h2:      28px;
  --text-h3:      22px;
  --text-h4:      18px;
  --text-body:    16px;
  --text-small:   14px;
  --text-caption: 12px;
  --text-micro:   11px;

  --lead-tight:   1.1;
  --lead-snug:    1.3;
  --lead-normal:  1.6;
  --lead-loose:   1.8;

  /* Heading letter-spacing — Mokoto runs wide; keep generous */
  --track-hero:   0.06em;
  --track-h1:     0.04em;
  --track-label:  0.20em;   /* section labels, nav */
  --track-eye:    0.30em;   /* tiny UPPERCASE */

  /* ========== SPACING ========== */
  --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;
  --space-32:     128px;

  /* ========== RADII ========== */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-xl:    16px;
  --radius-pill:  100px;

  /* ========== SHADOWS & GLOWS ========== */
  --shadow-card:  0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-soft:  0 4px 12px rgba(0, 0, 0, 0.3);
  --glow-cyan:    0 0 40px rgba(0, 231, 223, 0.25);
  --glow-cyan-sm: 0 0 12px rgba(0, 231, 223, 0.25);
  --glow-cyan-lg: 0 0 60px rgba(0, 231, 223, 0.35);

  /* ========== MOTION ========== */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     160ms;
  --dur-base:     280ms;
  --dur-slow:     480ms;

  /* ========== LAYOUT ========== */
  --container:    1200px;
  --container-wide: 1400px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Opt-in: add class="ds" to a container to apply these.
   ============================================================ */

.ds {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  line-height: var(--lead-normal);
}

.ds h1, .ds .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 800;
  letter-spacing: var(--track-h1);
  line-height: var(--lead-tight);
  text-transform: uppercase;
}

.ds h2, .ds .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: var(--track-h1);
  line-height: var(--lead-snug);
  text-transform: uppercase;
}

.ds h3, .ds .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: var(--lead-snug);
  text-transform: uppercase;
}

.ds h4, .ds .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ds p, .ds .body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lead-normal);
  color: var(--fg-muted);
}

.ds .eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

.ds .caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.ds code, .ds .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent);
  background: var(--cyan-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.ds .cyan { color: var(--accent); }
.ds .success { color: var(--success); }
.ds .danger { color: var(--danger); }

/* Signature diagonal sweep — overlay this on dark hero sections */
.ds-sweep {
  position: relative;
  overflow: hidden;
}
.ds-sweep::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 160%;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(0, 231, 223, 0.015) 50%,
    rgba(0, 231, 223, 0.04) 55%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 70%
  );
  pointer-events: none;
  transform: rotate(-5deg);
}

/* Grid overlay — for deep navy hero sections */
.ds-grid-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 231, 223, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 231, 223, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}