/* ============================================================
   MOHR AI — Design System (application stylesheet)
   Derived from "MOHR AI Design System" brand guide.
   Navy anchors · Electric blue activates · Cyber-lime sparks (~3%).
   Type: Chonburi (hero) · Domine (headings + body) · DM Mono (code)
         Arabic — Amiri (display) · Noto Naskh Arabic (body)
   ------------------------------------------------------------
   This file is the single source of truth for tokens + primitives.
   Surfaces (login, chat, templates, query, admin) import it and add
   only their layout-specific rules.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chonburi&family=Domine:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --mohr-navy:        #0A2540;
  --mohr-navy-light:  #0d2e4d;
  --mohr-navy-dim:    rgba(10,37,64,0.6);
  --mohr-blue:        #1B72CB;
  --mohr-blue-light:  #2d8ae0;
  --mohr-blue-dim:    rgba(27,114,203,0.15);
  --mohr-blue-glow:   rgba(27,114,203,0.35);

  /* ---------- HIGHLIGHT (the pop) ---------- */
  --mohr-spark:       #C7FF3D;
  --mohr-spark-bg:    rgba(199,255,61,0.18);
  --mohr-spark-glow:  rgba(199,255,61,0.55);
  --mohr-spark-deep:  #9FE000;

  /* ---------- NEUTRALS ---------- */
  --mohr-white:       #FFFFFF;
  --mohr-off-white:   #F7F8FA;
  --mohr-slate:       #666666;
  --mohr-slate-light: #999999;
  --mohr-border:      rgba(10,37,64,0.10);
  --mohr-border-dark: rgba(255,255,255,0.08);

  /* ---------- SEMANTIC ---------- */
  --mohr-success:     #16a34a;
  --mohr-success-bg:  rgba(34,197,94,0.10);
  --mohr-warning:     #d97706;
  --mohr-warning-bg:  rgba(245,158,11,0.10);
  --mohr-danger:      #ef4444;
  --mohr-danger-bg:   rgba(239,68,68,0.10);

  /* ---------- FOREGROUND TOKENS (light bg) ---------- */
  --fg1: var(--mohr-navy);
  --fg2: var(--mohr-slate);
  --fg3: var(--mohr-slate-light);
  --fg-accent: var(--mohr-blue);

  /* ---------- BACKGROUND TOKENS ---------- */
  --bg1: var(--mohr-off-white);
  --bg2: var(--mohr-white);
  --bg-dark: var(--mohr-navy);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-hero:    'Chonburi', serif;
  --font-display: 'Domine', Georgia, serif;
  --font-body:    'Domine', Georgia, serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- ARABIC TYPOGRAPHY ---------- */
  --font-ar-display: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-ar-body:    'Noto Naskh Arabic', 'Amiri', serif;
  --font-ar-sans:    'Noto Naskh Arabic', 'Segoe UI', sans-serif;

  /* ---------- TYPE SCALE ---------- */
  --text-hero:    clamp(60px, 8vw, 110px);
  --text-h1:      clamp(32px, 4vw, 52px);
  --text-h2:      28px;
  --text-h3:      20px;
  --text-h4:      16px;
  --text-body-lg: 18px;
  --text-body:    15px;
  --text-body-sm: 13px;
  --text-label:   12px;
  --text-caption: 11px;
  --text-micro:   10px;

  /* ---------- 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: 100px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 100px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 2px 8px rgba(10,37,64,0.06);
  --shadow:    0 8px 24px rgba(10,37,64,0.08);
  --shadow-md: 0 12px 40px rgba(10,37,64,0.10);
  --shadow-lg: 0 16px 40px rgba(10,37,64,0.12);
  --shadow-blue-glow: 0 4px 20px var(--mohr-blue-glow);

  /* ---------- BORDERS ---------- */
  --border-thin:  1px solid var(--mohr-border);
  --border-input: 1.5px solid var(--mohr-border);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      180ms;
  --duration-slow: 300ms;
  --duration-slower: 600ms;
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection { background: var(--mohr-spark); color: var(--mohr-navy); }

/* ============================================================
   SEMANTIC TYPE HELPERS
   ============================================================ */
.mohr-hero   { font-family: var(--font-hero); font-size: var(--text-hero); font-weight: 400; line-height: .95; letter-spacing: -.01em; color: var(--fg1); }
.mohr-h1     { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--fg1); }
.mohr-h2     { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--fg1); }
.mohr-h3     { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500; line-height: 1.25; letter-spacing: -.005em; color: var(--fg1); }
.mohr-h4     { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 500; line-height: 1.3; color: var(--fg1); }
.mohr-body-lg{ font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: 400; line-height: 1.7; color: var(--fg2); }
.mohr-body   { font-family: var(--font-body); font-size: var(--text-body); font-weight: 400; line-height: 1.65; color: var(--fg2); }
.mohr-body-sm{ font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: 400; line-height: 1.55; color: var(--fg2); }
.mohr-label  { font-family: var(--font-body); font-size: var(--text-label); font-weight: 500; letter-spacing: .01em; color: var(--fg1); }
.mohr-eyebrow,
.mohr-caption{ font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-accent); }
.mohr-meta   { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 400; letter-spacing: .10em; text-transform: uppercase; color: var(--fg3); }
.mohr-code   { font-family: var(--font-mono); font-size: var(--text-body-sm); line-height: 1.7; }

/* Section eyebrow w/ rule */
.mohr-section-eyebrow{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mohr-blue); display: flex; align-items: center; gap: 10px; }
.mohr-section-eyebrow .ln{ width: 40px; height: 1px; background: rgba(27,114,203,.4); }

/* Lime marker highlight on a word */
.mohr-mark{ position: relative; display: inline-block; }
.mohr-mark::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:2px; height:30%; background: var(--mohr-spark); opacity:.85; transform: skewX(-6deg); z-index:-1; }

/* ---------- Arabic helpers ---------- */
.mohr-ar-h1   { font-family: var(--font-ar-display); font-weight: 700; line-height: 1.4; direction: rtl; color: var(--fg1); }
.mohr-ar-body { font-family: var(--font-ar-body); font-weight: 400; line-height: 2; direction: rtl; color: var(--fg2); }
[dir="rtl"], .rtl { font-family: var(--font-ar-body); }

/* ============================================================
   BUTTONS
   ============================================================ */
.mohr-btn{
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 10px 22px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  transition: all var(--duration) var(--ease-standard);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.mohr-btn:disabled{ opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.mohr-btn.sm{ font-size: 12px; padding: 7px 14px; }
.mohr-btn.lg{ font-size: 16px; padding: 14px 28px; border-radius: 9px; }

.mohr-btn.spark{ background: var(--mohr-spark); color: var(--mohr-navy); font-weight: 600; }
.mohr-btn.spark:hover:not(:disabled){ background: var(--mohr-spark-deep); box-shadow: 0 0 0 4px rgba(199,255,61,.2), 0 6px 24px rgba(199,255,61,.3); transform: translateY(-1px); }

.mohr-btn.primary{ background: var(--mohr-blue); color: #fff; }
.mohr-btn.primary:hover:not(:disabled){ background: var(--mohr-blue-light); box-shadow: var(--shadow-blue-glow); transform: translateY(-1px); }

.mohr-btn.secondary{ background: var(--mohr-navy); color: #fff; }
.mohr-btn.secondary:hover:not(:disabled){ background: var(--mohr-navy-light); transform: translateY(-1px); }

.mohr-btn.ghost{ background: transparent; color: var(--mohr-navy); border: 1.5px solid var(--mohr-border); }
.mohr-btn.ghost:hover:not(:disabled){ border-color: var(--mohr-blue); color: var(--mohr-blue); background: rgba(27,114,203,.08); }

.mohr-btn.danger{ background: var(--mohr-danger); color: #fff; }
.mohr-btn.danger:hover:not(:disabled){ filter: brightness(1.08); transform: translateY(-1px); }

/* Ghost button tuned for dark (navy) surfaces */
.mohr-btn.ghost-on-dark{ background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.mohr-btn.ghost-on-dark:hover:not(:disabled){ background: rgba(199,255,61,.12); border-color: rgba(199,255,61,.5); color: var(--mohr-spark); }

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.mohr-b{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.mohr-b .bdot{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mohr-b .bdot.pulse{ animation: mohr-pulse 1.6s ease-in-out infinite; }
.mohr-b.blue { background: var(--mohr-blue-dim); color: var(--mohr-blue); border: 1px solid rgba(27,114,203,.2); }
.mohr-b.navy { background: rgba(10,37,64,.08); color: var(--mohr-navy); border: 1px solid var(--mohr-border); }
.mohr-b.green{ background: var(--mohr-success-bg); color: var(--mohr-success); border: 1px solid rgba(34,197,94,.2); }
.mohr-b.amber{ background: var(--mohr-warning-bg); color: var(--mohr-warning); border: 1px solid rgba(245,158,11,.2); }
.mohr-b.red  { background: var(--mohr-danger-bg); color: var(--mohr-danger); border: 1px solid rgba(239,68,68,.2); }
.mohr-b.spark{ background: var(--mohr-navy); color: var(--mohr-spark); border: 1px solid rgba(199,255,61,.4); }
.mohr-b.spark .bdot{ background: var(--mohr-spark); box-shadow: 0 0 8px var(--mohr-spark); }
.mohr-b.lime-solid{ background: var(--mohr-spark); color: var(--mohr-navy); font-weight: 600; border: 1px solid var(--mohr-border); }

/* ============================================================
   CARDS
   ============================================================ */
.mohr-card{ position: relative; background: var(--bg2); border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid var(--mohr-border); box-shadow: var(--shadow-sm); transition: border-color var(--duration), transform var(--duration), box-shadow var(--duration); }
.mohr-card.hover:hover{ border-color: var(--mohr-blue); transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Dark "service" card (navy w/ lime glow) */
.mohr-card-dark{ position: relative; background: var(--mohr-navy); border-radius: var(--radius-lg); padding: var(--space-6); color: #fff; overflow: hidden; border: 1px solid rgba(199,255,61,.15); }
.mohr-card-dark::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 100% 0%, rgba(199,255,61,.18), transparent 50%); pointer-events:none; }

/* ============================================================
   FORM INPUTS
   ============================================================ */
.mohr-field{ display: flex; flex-direction: column; gap: 6px; }
.mohr-field label{ font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--mohr-navy); }
.mohr-input{
  padding: 10px 14px; font-family: var(--font-body); font-size: 14px; color: var(--mohr-navy);
  background: #fff; border: 1.5px solid var(--mohr-border); border-radius: var(--radius); outline: none;
  transition: border-color var(--duration), box-shadow var(--duration); width: 100%;
}
.mohr-input::placeholder{ color: var(--mohr-slate-light); }
.mohr-input:focus{ border-color: var(--mohr-blue); box-shadow: 0 0 0 3px var(--mohr-blue-dim); }
.mohr-input.err{ border-color: var(--mohr-danger); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.mohr-err-text{ font-family: var(--font-mono); font-size: 10px; color: var(--mohr-danger); letter-spacing: .05em; }

/* ============================================================
   CODE / SQL BLOCK
   ============================================================ */
.mohr-code-block{ background: var(--mohr-navy); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(199,255,61,.1); }
.mohr-code-block .head{ display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mohr-code-block .dots{ display: flex; gap: 6px; }
.mohr-code-block .dots span{ width: 9px; height: 9px; border-radius: 50%; }
.mohr-code-block .lang{ font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.4); letter-spacing: .1em; text-transform: uppercase; }
.mohr-code-block .body{ padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.88); white-space: pre; overflow-x: auto; }
.mohr-code-block .kw{ color:#79c0ff } .mohr-code-block .fn{ color:#d2a8ff } .mohr-code-block .str{ color:#a5d6ff }
.mohr-code-block .cm{ color:rgba(255,255,255,.3); font-style: italic } .mohr-code-block .num{ color:#f2cc60 }

/* ============================================================
   LIVE / SPARK CUES + MOTION
   ============================================================ */
.mohr-live{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--mohr-spark); }
.mohr-spark-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--mohr-spark); box-shadow: 0 0 10px var(--mohr-spark); animation: mohr-pulse 1.4s ease-in-out infinite; }

@keyframes mohr-pulse{ 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.4); opacity: .4; } }

/* Processing equalizer bars (blue with lime center) */
.mohr-bars{ display: inline-flex; gap: 4px; align-items: flex-end; height: 22px; }
.mohr-bars span{ width: 5px; background: var(--mohr-blue); border-radius: 2px; animation: mohr-bar 1.4s ease-in-out infinite; }
.mohr-bars span:nth-child(2){ animation-delay: .2s; }
.mohr-bars span:nth-child(3){ animation-delay: .4s; background: var(--mohr-spark); box-shadow: 0 0 8px rgba(199,255,61,.5); }
.mohr-bars span:nth-child(4){ animation-delay: .6s; }
.mohr-bars span:nth-child(5){ animation-delay: .8s; }
@keyframes mohr-bar{ 0%,100%{ height: 5px; opacity: .4; } 50%{ height: 22px; opacity: 1; } }

/* Progress bar (blue → lime tip) */
.mohr-progress{ width: 100%; height: 4px; background: rgba(10,37,64,.08); border-radius: 2px; overflow: hidden; }
.mohr-progress .in{ height: 100%; background: linear-gradient(90deg, var(--mohr-blue), var(--mohr-spark)); border-radius: 2px; }

/* ============================================================
   SCROLLBARS (light surfaces)
   ============================================================ */
.mohr-scroll::-webkit-scrollbar{ height: 8px; width: 8px; }
.mohr-scroll::-webkit-scrollbar-thumb{ background: rgba(10,37,64,.18); border-radius: 8px; }
.mohr-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(10,37,64,.32); }
.mohr-scroll::-webkit-scrollbar-track{ background: transparent; }