/* =====================================================================
   corentos — LIGHT alternative themes (A/B/C)
   Brand stays: teal accent (#00A8A8), slate ink (#16263A), Inter.
   Only the canvas goes light. Three lighter takes for comparison.
   ===================================================================== */

/* ---- Theme A · Klar (crisp white) ---- */
.theme-a {
  --bg:        #FFFFFF;
  --band:      #F2F5F8;
  --surface:   #FFFFFF;
  --surface-2: #F7F9FB;
  --border:    #E4E9ED;
  --border-2:  #EDF1F4;
  --ink:       #16263A;
  --body:      #46586C;
  --muted:     #7C8A98;
  --accent:        #00A8A8;
  --accent-bright: #00BFBF;
  --accent-deep:   #0B7E80;
  --accent-soft:   rgba(0,168,168,0.10);
  --accent-line:   rgba(0,168,168,0.22);
  --c2:        #F2683C;
  --c2-deep:   #D9501F;
  --c2-soft:   rgba(242,104,60,0.12);
  --c2-line:   rgba(242,104,60,0.26);
  --shadow-card: 0 1px 2px rgba(20,40,60,0.04), 0 8px 24px -12px rgba(20,40,60,0.12);
  --shadow-pop:  0 12px 30px -10px rgba(20,40,60,0.18);
}

/* ---- Theme B · Slate Tint (cool cloud) ---- */
.theme-b {
  --bg:        #EAF0F4;
  --band:      #DFE8ED;
  --surface:   #FFFFFF;
  --surface-2: #F4F8FA;
  --border:    #D4DEE5;
  --border-2:  #E1E9EE;
  --ink:       #16263A;
  --body:      #43546A;
  --muted:     #74859A;
  --accent:        #00A8A8;
  --accent-bright: #00BFBF;
  --accent-deep:   #0B7E80;
  --accent-soft:   rgba(0,168,168,0.12);
  --accent-line:   rgba(0,168,168,0.24);
  --c2:        #F2683C;
  --c2-deep:   #D9501F;
  --c2-soft:   rgba(242,104,60,0.13);
  --c2-line:   rgba(242,104,60,0.28);
  --shadow-card: 0 1px 2px rgba(25,42,61,0.05), 0 10px 26px -14px rgba(25,42,61,0.22);
  --shadow-pop:  0 16px 34px -12px rgba(25,42,61,0.28);
}

/* ---- Theme C · Warm Paper (editorial) ---- */
.theme-c {
  --bg:        #FBFAF7;
  --band:      #F1EEE8;
  --surface:   #FFFFFF;
  --surface-2: #F8F6F1;
  --border:    #E9E3D9;
  --border-2:  #F0EBE2;
  --ink:       #14202E;
  --body:      #4B5260;
  --muted:     #8A8175;
  --accent:        #00A8A8;
  --accent-bright: #00BFBF;
  --accent-deep:   #0B7E80;
  --accent-soft:   rgba(0,168,168,0.10);
  --accent-line:   rgba(0,168,168,0.22);
  --c2:        #F2683C;
  --c2-deep:   #C9491A;
  --c2-soft:   rgba(242,104,60,0.12);
  --c2-line:   rgba(242,104,60,0.26);
  --shadow-card: 0 1px 2px rgba(40,34,24,0.05), 0 10px 26px -14px rgba(40,34,24,0.16);
  --shadow-pop:  0 16px 34px -12px rgba(40,34,24,0.20);
}

/* =====================================================================
   Shared component styles (theme-agnostic — drive off the vars above)
   ===================================================================== */
.ab {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--body);
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }

/* ---------- WEBSITE ---------- */
.site-nav {
  display: flex; align-items: center; gap: 40px;
  padding: 22px 56px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.brand-word { font-size: 25px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 34px; margin-left: auto; }
.nav-links a { color: var(--body); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: var(--accent); }
.btn {
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 11px 22px; border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(0,168,168,0.55); }
.btn-primary:hover { background: var(--accent-bright); }
.tag-c2 { background: var(--c2-soft); color: var(--c2-deep); font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: 0.01em; }
.btn-ghost { background: transparent; color: var(--accent-deep); border-color: var(--accent-line); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-c2 { background: var(--c2); color: #fff; box-shadow: 0 8px 18px -8px rgba(242,104,60,0.55); }
.btn-c2:hover { filter: brightness(1.05); }
.lang { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.lang b { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 1px; font-weight: 600; }

.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 64px 56px 72px; position: relative; }
.hero-glow {
  position: absolute; right: 4%; top: 8%; width: 520px; height: 420px;
  background: radial-gradient(circle at 60% 40%, var(--accent-soft), transparent 65%);
  filter: blur(10px); pointer-events: none;
}
.hero-word { font-size: 76px; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; line-height: 1; }
.hero-tag { font-size: 31px; font-weight: 300; color: var(--ink); margin-top: 14px; letter-spacing: -0.01em; }
.hero-lead { font-size: 18px; line-height: 1.7; color: var(--body); margin-top: 26px; max-width: 430px; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; }

/* triangle diagram */
.diagram { position: relative; height: 380px; }
.node {
  position: absolute; width: 92px; height: 92px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--accent-line);
  display: grid; place-items: center; color: var(--accent); box-shadow: var(--shadow-card);
}
.node .nlabel { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--accent-deep); }
.node-hub {
  width: 64px; height: 64px; background: var(--accent); border: 0; color: #fff;
  font-weight: 700; font-size: 20px; box-shadow: 0 10px 24px -8px rgba(0,168,168,0.6);
}
.node-c2 { border-color: var(--c2-line); color: var(--c2); }
.node-c2 .nlabel { color: var(--c2-deep); }

.stats { display: grid; grid-template-columns: repeat(4,1fr); background: var(--band); border-top: 1px solid var(--border); }
.stat { padding: 34px 24px; text-align: center; }
.stat .num { font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1; }
.stat .lab { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* ---------- ERP ---------- */
.erp { display: grid; grid-template-columns: 248px 1fr; height: 100%; }
.erp-side { background: var(--surface); border-right: 1px solid var(--border); padding: 22px 16px; display: flex; flex-direction: column; }
.erp-logo { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
.erp-logo .c { width: 38px; height: 38px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; box-shadow: 0 8px 18px -8px rgba(0,168,168,0.55); }
.erp-logo .t b { display: block; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.erp-logo .t span { display: block; color: var(--muted); font-size: 10px; letter-spacing: 0.14em; font-weight: 600; }
.erp-cap { font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: var(--muted); padding: 8px 12px; }
.erp-nav { display: flex; flex-direction: column; gap: 4px; }
.erp-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; color: var(--body); font-size: 15px; font-weight: 500; }
.erp-item svg { color: var(--muted); }
.erp-item .badge { margin-left: auto; background: var(--accent-soft); color: var(--accent-deep); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.erp-item.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.erp-item.active svg { color: var(--accent); }
.erp-user { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.erp-user .av { width: 38px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.erp-user b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.erp-user span { display: block; color: var(--muted); font-size: 12px; }

.erp-main { background: var(--bg); display: flex; flex-direction: column; min-width: 0; }
.erp-top { display: flex; align-items: center; gap: 20px; padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--surface); }
.erp-crumb span { display: block; font-size: 12px; color: var(--muted); }
.erp-crumb b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.erp-search { flex: 1; max-width: 460px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.erp-iconbtn { margin-left: auto; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--muted); }
.erp-content { padding: 28px; overflow: hidden; }
.erp-h { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.erp-h h1 { font-size: 30px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.erp-h p { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.pill { background: var(--surface); border: 1px solid var(--border); color: var(--body); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; }

.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-card); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kpi-ic { width: 38px; height: 38px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.kpi-ic.c2 { background: var(--c2-soft); color: var(--c2-deep); }
.kpi-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.chip-up { background: rgba(34,197,94,0.12); color: #15803D; }
.chip-down { background: rgba(239,68,68,0.12); color: #B91C1C; }
.kpi .v { font-size: 27px; font-weight: 700; color: var(--ink); line-height: 1; white-space: nowrap; }
.kpi .l { font-size: 13px; color: var(--muted); margin-top: 7px; }

.erp-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-card); }
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card-h b { font-size: 16px; color: var(--ink); font-weight: 600; }
.card-h a { font-size: 13px; color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.chart { display: flex; align-items: flex-end; gap: 14px; height: 196px; padding-top: 8px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.bar i { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px 6px 0 0; display: block; }
.bar.hot i { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); border: 0; }
.bar.c2 i { background: linear-gradient(180deg, #FF7E50, var(--c2)); border: 0; }
.bar span { font-size: 12px; color: var(--muted); }
.chart-legend { display: flex; gap: 18px; margin-top: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.feed { display: flex; flex-direction: column; gap: 2px; }
.feed-row { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--border-2); }
.feed-row:last-child { border-bottom: 0; }
.feed-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.feed b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.feed span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }