/* Kensho Design System — AD-148 (p_kensho_design_system) */
/* KenTechIT Services — Version 2.0 — 2026-04-02 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poppins:wght@400;500;700&family=DM+Sans:wght@400;500;700&family=Nunito:wght@400;500;700&family=Roboto:wght@400;500;700&family=Lato:wght@400;700&family=Montserrat:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap');

:root {
  --k-bg:       #FFFFFF;
  --k-surface:  #F0FDFA;
  --k-card:     #FFFFFF;
  --k-brand:    #0F766E;
  --k-accent:   #14B8A6;
  --k-ai:       #6366F1;
  --k-text:     #0F172A;
  --k-text2:    #475569;
  --k-muted:    #94A3B8;
  --k-border:   #E2E8F0;
  --k-radius:   16px;
  --k-font:     'Inter', sans-serif;
  --k-fs:       15px;
  --k-fw:       400;
  --k-spacing:  12px;
  /* SACRED - never override per AD-154 */
  --k-profit:   #10B981;
  --k-loss:     #EF4444;
  --k-warning:  #F59E0B;
  --k-guardian: #3B82F6;
}

/* Named Presets */
.theme-teal-classic {
  --k-bg: #FFFFFF; --k-surface: #F0FDFA; --k-card: #FFFFFF;
  --k-brand: #0F766E; --k-accent: #14B8A6; --k-text: #0F172A;
  --k-text2: #475569; --k-muted: #94A3B8; --k-border: #E2E8F0;
}
.theme-kensho-dark {
  --k-bg: #0A0F1E; --k-surface: #111827; --k-card: #1F2937;
  --k-brand: #00B4D8; --k-accent: #14B8A6; --k-text: #E2E8F0;
  --k-text2: #CBD5E1; --k-muted: #64748B; --k-border: #374151;
}
.theme-midnight-blue {
  --k-bg: #0A1628; --k-surface: #0F2040; --k-card: #162850;
  --k-brand: #3B82F6; --k-text: #F1F5F9; --k-muted: #475569; --k-border: #1E3A6E;
}
.theme-royal-purple {
  --k-bg: #F5F3FF; --k-surface: #EDE9FE; --k-card: #FFFFFF;
  --k-brand: #7C3AED; --k-text: #1E1B4B; --k-muted: #94A3B8; --k-border: #EDE9FE;
}
.theme-pastel-pink {
  --k-bg: #FFF1F2; --k-surface: #FFE4E6; --k-card: #FFFFFF;
  --k-brand: #F43F5E; --k-text: #881337; --k-muted: #94A3B8; --k-border: #FFE4E6;
}
.theme-pastel-mint {
  --k-bg: #F0FDFA; --k-surface: #CCFBF1; --k-card: #FFFFFF;
  --k-brand: #14B8A6; --k-text: #134E4A; --k-muted: #94A3B8; --k-border: #CCFBF1;
}
.theme-pastel-lavender {
  --k-bg: #F5F3FF; --k-surface: #EDE9FE; --k-card: #EDE9FE;
  --k-brand: #8B5CF6; --k-text: #4C1D95; --k-muted: #94A3B8; --k-border: #DDD6FE;
}
.theme-sunset-gold {
  --k-bg: #FFF8E1; --k-surface: #FFF3CD; --k-card: #FFFFFF;
  --k-brand: #FF6F00; --k-text: #1C1917; --k-muted: #92400E; --k-border: #FDE68A;
}
.theme-forest-green {
  --k-bg: #F0FDF4; --k-surface: #DCFCE7; --k-card: #FFFFFF;
  --k-brand: #16A34A; --k-text: #14532D; --k-muted: #94A3B8; --k-border: #BBF7D0;
}
.theme-ocean-dark {
  --k-bg: #006064; --k-surface: #00787D; --k-card: #00838F;
  --k-brand: #00BCD4; --k-text: #E0F7FA; --k-muted: #80CBC4; --k-border: #00ACC1;
}
.theme-rose-gold {
  --k-bg: #FFF0F3; --k-surface: #FFD6E0; --k-card: #FFFFFF;
  --k-brand: #AD1457; --k-text: #560027; --k-muted: #94A3B8; --k-border: #FFD6E0;
}
.theme-obsidian {
  --k-bg: #0F172A; --k-surface: #1E293B; --k-card: #1E293B;
  --k-brand: #A78BFA; --k-text: #F8FAFC; --k-muted: #475569; --k-border: #334155;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Base */
html, body {
  height: 100%; font-family: var(--k-font); font-size: var(--k-fs);
  font-weight: var(--k-fw); background: var(--k-bg); color: var(--k-text);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}

/* Layout */
.page-wrap { display: flex; flex-direction: column; height: 100%; max-width: 430px; margin: 0 auto; }
.page-content { flex: 1; overflow-y: auto; padding: var(--k-spacing); padding-bottom: 80px; }

/* Topbar */
.k-topbar {
  padding: 12px 14px 8px; border-bottom: 0.5px solid var(--k-border);
  background: var(--k-bg); display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.k-topbar-logo { font-size: 18px; font-weight: 700; color: var(--k-brand); letter-spacing: -0.5px; }

/* Cards */
.k-card {
  background: var(--k-card); border: 0.5px solid var(--k-border);
  border-radius: var(--k-radius); padding: var(--k-spacing); margin-bottom: 12px;
}
.k-card-title { font-size: 11px; font-weight: 600; color: var(--k-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }

/* Buttons */
.k-btn-primary {
  background: var(--k-brand); color: #fff; border-radius: 12px;
  padding: 10px 16px; font-size: 14px; font-weight: 500; border: none;
  cursor: pointer; width: 100%; text-align: center; display: block; transition: opacity 0.15s;
}
.k-btn-primary:active { opacity: 0.85; }
.k-btn-secondary {
  background: transparent; color: var(--k-brand);
  border: 1.5px solid var(--k-brand); border-radius: 12px;
  padding: 10px 16px; font-size: 14px; font-weight: 500;
  cursor: pointer; width: 100%; text-align: center; display: block;
}
.k-btn-danger {
  background: var(--k-loss); color: #fff; border-radius: 12px;
  padding: 10px 16px; font-size: 14px; font-weight: 500; border: none; cursor: pointer;
}

/* Typography */
.k-heading { font-size: 22px; font-weight: 700; color: var(--k-text); }
.k-subheading { font-size: 13px; color: var(--k-text2); }
.k-label { font-size: 11px; color: var(--k-muted); font-weight: 500; }
.k-value { font-size: 15px; color: var(--k-text); font-weight: 600; }
.k-num { font-variant-numeric: tabular-nums; }

/* Financial Colors (SACRED - AD-154) */
.k-text-profit { color: var(--k-profit) !important; }
.k-text-loss { color: var(--k-loss) !important; }
.k-text-warn { color: var(--k-warning) !important; }
.k-text-guardian { color: var(--k-guardian) !important; }
.k-bg-profit { background: var(--k-profit) !important; color: #fff !important; }
.k-bg-loss { background: var(--k-loss) !important; color: #fff !important; }

/* Pills / Badges */
.k-pill { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.k-pill-green { background: rgba(16,185,129,0.12); color: var(--k-profit); }
.k-pill-red { background: rgba(239,68,68,0.12); color: var(--k-loss); }
.k-pill-amber { background: rgba(245,158,11,0.12); color: var(--k-warning); }
.k-pill-blue { background: rgba(59,130,246,0.12); color: var(--k-guardian); }
.k-pill-brand { background: var(--k-brand); color: #fff; }
.k-pill-muted { background: var(--k-surface); color: var(--k-muted); }
.k-badge { background: var(--k-loss); color: #fff; border-radius: 999px; font-size: 9px; padding: 1px 5px; font-weight: 700; }

/* Bottom Nav */
.k-bottom-nav {
  display: flex; border-top: 0.5px solid var(--k-border); background: var(--k-bg);
  padding: 8px 0 4px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 100;
}
.k-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-size: 10px; color: var(--k-muted); font-weight: 500; }
.k-nav-item.active { color: var(--k-brand); }

/* Accent Left Borders */
.k-accent-left-teal { border-left: 3px solid var(--k-brand); border-radius: 0 var(--k-radius) var(--k-radius) 0; padding: var(--k-spacing); }
.k-accent-left-amber { border-left: 3px solid var(--k-warning); border-radius: 0 var(--k-radius) var(--k-radius) 0; padding: var(--k-spacing); }
.k-accent-left-green { border-left: 3px solid var(--k-profit); border-radius: 0 var(--k-radius) var(--k-radius) 0; padding: var(--k-spacing); }
.k-accent-left-red { border-left: 3px solid var(--k-loss); border-radius: 0 var(--k-radius) var(--k-radius) 0; padding: var(--k-spacing); }
.k-accent-left-blue { border-left: 3px solid var(--k-guardian); border-radius: 0 var(--k-radius) var(--k-radius) 0; padding: var(--k-spacing); }
.k-accent-left-indigo { border-left: 3px solid var(--k-ai); border-radius: 0 var(--k-radius) var(--k-radius) 0; padding: var(--k-spacing); }

/* Skeleton Loading */
.k-skeleton {
  background: linear-gradient(90deg, var(--k-border) 25%, var(--k-surface) 50%, var(--k-border) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Animations */
.k-slide-up { animation: slideUp 300ms ease-out; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.k-fade-in { animation: fadeIn 250ms ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Inputs */
.k-input {
  background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: 10px; padding: 12px 14px; font-size: 15px;
  color: var(--k-text); width: 100%; outline: none; font-family: var(--k-font);
}
.k-input:focus { border-color: var(--k-brand); }
.k-input::placeholder { color: var(--k-muted); }
.k-input-label { font-size: 12px; color: var(--k-text2); margin-bottom: 4px; font-weight: 500; }

/* Divider */
.k-divider { height: 0.5px; background: var(--k-border); margin: 12px 0; }

/* Toast */
.k-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--k-text); color: var(--k-bg); padding: 10px 20px;
  border-radius: 20px; font-size: 13px; font-weight: 500; z-index: 999;
  animation: slideUp 200ms ease-out;
}

/* Bottom Sheet */
.k-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: flex-end; }
.k-sheet { background: var(--k-bg); border-radius: 20px 20px 0 0; padding: 20px 16px 32px; width: 100%; max-width: 430px; margin: 0 auto; }
.k-sheet-handle { width: 36px; height: 4px; background: var(--k-border); border-radius: 2px; margin: 0 auto 16px; }

/* Persistent Banner */
.k-banner { background: var(--k-brand); color: #fff; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; }
.k-banner-amber { background: var(--k-warning); color: #fff; }

/* Color Swatch */
.k-swatch-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.k-swatch { width: 28px; height: 28px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s; }
.k-swatch:active { transform: scale(0.9); }
.k-swatch.selected { border: 2px solid var(--k-brand); outline: 2px solid #fff; }

/* Phone Mockup */
.k-phone-mockup { width: 160px; height: 280px; border: 3px solid var(--k-border); border-radius: 20px; overflow: hidden; background: var(--k-bg); box-shadow: 0 8px 24px rgba(0,0,0,0.12); margin: 0 auto; }

/* Section Header */
.k-section { margin: 20px 0 10px; }
.k-section-title { font-size: 13px; font-weight: 700; color: var(--k-text); margin-bottom: 2px; }
.k-section-sub { font-size: 11px; color: var(--k-muted); }

/* Regime Colors */
.regime-bull { color: var(--k-profit); }
.regime-bear { color: var(--k-warning); }
.regime-sideways { color: var(--k-guardian); }
.regime-volatile { color: var(--k-loss); }

/* SEBI Disclaimer */
.k-sebi-disclaimer { font-size: 10px; color: var(--k-muted); text-align: center; padding: 8px 16px; line-height: 1.4; }

/* Slider */
.k-slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--k-border); outline: none; }
.k-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--k-brand); cursor: pointer; }

/* Toggle */
.k-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.k-toggle input { opacity: 0; width: 0; height: 0; }
.k-toggle-slider { position: absolute; inset: 0; background: var(--k-border); border-radius: 24px; cursor: pointer; transition: 0.2s; }
.k-toggle input:checked + .k-toggle-slider { background: var(--k-brand); }
.k-toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.k-toggle input:checked + .k-toggle-slider::before { transform: translateX(20px); }