/* =========================
   Accounting Template One (v1.1 - legacy-safe)
   Token-driven, palette-swappable, no gradients, no color-mix()
   ========================= */

/* =========================
   PALETTE TOKENS (swap only :root)
   Default: Palette #2
   F4F1DE / E07A5F / 3D405B / 81B29A / F2CC8F
   ========================= */
:root{
  /* Palette colors */
  --p1:#F4F1DE; /* light */
  --p2:#E07A5F; /* coral */
  --p3:#3D405B; /* slate */
  --p4:#81B29A; /* green */
  --p5:#F2CC8F; /* sand */

  /* Roles */
  --bg: var(--p1);
  --text: var(--p3);
  --muted: rgba(61,64,91,0.78);

  --nav-bg: rgba(61,64,91,0.96);
  --nav-text: #F4F1DE;
  --nav-link: rgba(244,241,222,0.86);
  --nav-border: rgba(129,178,154,0.75);

  --surface: #ffffff;
  --surface-2: rgba(242,204,143,0.45);

  --card-bg: #ffffff;
  --subcard-bg: rgba(129,178,154,0.18);
  --card-nested-bg: rgba(255, 255, 255, 0.925);  /* lighter “raised” surface */


  --line: rgba(61,64,91,0.16);

  /* Buttons */
  --btn-primary-bg: #E07A5F;
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: rgba(224,122,95,0.20);
  --btn-secondary-border: rgba(224,122,95,0.35);
  --btn-secondary-text: rgba(61, 64, 91, 0.801);

  /* Badges */
  --badge-bg: #84a98cc4;
  --badge-text: #2f3e46de;
  --badge-border: #3D405B;

  /* Accents */
  --hero-rail: rgba(224,122,95,0.92);
  --side-rail: rgba(129,178,154,0.85);

  /* Effects */
  --shadow: 0 10px 26px rgba(61,64,91,0.18);
  --radius: 16px;

  /* Accessibility */
  --focus: rgba(224,122,95,0.35);
}

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* =========================
   NAV
   ========================= */


.nav{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: var(--nav-bg);
  border-bottom: 3px solid var(--nav-border);
}

.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.2px;color:var(--nav-text)}

.logo-mark{
  width:34px;height:34px;border-radius:10px;
  background: var(--p1);
  border: 2px solid rgba(210,181,108,0.85);
  box-shadow: var(--shadow);
}

/* Logo “plug-in” */
.brand-logo{
  height:75px;
  width:auto;
  display:block;
}

/* Optional: keep text as fallback or for SEO */
.brand-name{
  color: var(--nav-text);
  font-weight: 900;
}

/* If a client wants logo-only, add class 'logo-only' to body */
body.logo-only .brand-name{display:none;}


.nav-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav-links a{color: var(--nav-link);font-weight:700;font-size:14px}
.nav-links a.active{color: var(--nav-text)}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  font-weight:800;font-size:14px;

  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}

.btn:hover{filter:brightness(1.03)}
.btn.small{padding:8px 12px;border-radius:10px}

.btn.primary{
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
}

.btn.primary:hover{filter: brightness(1.05);}

/* =========================
   HERO + GRID
   ========================= */
.hero{padding:56px 0 20px}

.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:26px;
  align-items:stretch;
}

/* =========================
   CARDS
   ========================= */
.card{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
}
/* Nested cards: card inside card */
.card .card{
  background: var(--card-nested-bg);
  border-color: rgba(61,64,91,0.12);
    border-left: 4px solid rgba(224,122,95,0.35); /* soft coral rail */

  box-shadow: 0 10px 18px rgba(61,64,91,0.10);
}


/* Subcards only (the smaller tiles) */
.card.box{
  background: var(--subcard-bg);
}

/* Key cards */
.hero-card{
  padding:26px;
  border-top: 6px solid var(--hero-rail);
}

.side-card{
  padding:20px;
  display:flex;flex-direction:column;gap:12px;
  border-top: 6px solid var(--side-rail);
}

/* =========================
   TYPOGRAPHY
   ========================= */
.kicker{
  color: var(--muted);
  font-weight:900;font-size:13px;
  letter-spacing:.35px;
  text-transform:uppercase;
}

h1{margin:12px 0 12px;font-size:44px;line-height:1.1;color:var(--text)}
.lead{color:var(--muted);font-size:18px;margin:0 0 18px}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* =========================
   BADGES
   ========================= */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.badge{
  padding:8px 12px;
  border-radius:999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-weight:800;
  font-size:13px;
  border: 1px solid var(--badge-border);
  letter-spacing: .2px;
  text-transform: none;
}

.badge:hover{filter: brightness(1.03)}

/* Optional softer badge */
.badge.positive{
  background: rgba(129,178,154,0.28);
  border-color: rgba(129,178,154,0.55);
  color: var(--text);
}

/* =========================
   SECTIONS + CONTENT GRIDS
   ========================= */
.section{padding:26px 0}
.section h2{margin:0 0 10px;font-size:28px}
.section p{color:var(--muted);margin:0 0 16px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.box{padding:18px}
.box h3{margin:0 0 6px;font-size:18px}
.box p{margin:0;color:var(--muted)}
.box ul{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.box ul li{margin:6px 0}

hr.sep{border:none;border-top:1px solid rgba(61,64,91,0.14);margin:20px 0}

/* =========================
   NOTE CALLOUT
   ========================= */
.note{
  padding:14px 14px;
  border-radius:14px;
  border:1px dashed rgba(61,64,91,0.20);
  background: var(--surface-2);
  color: rgba(61,64,91,0.90);
  font-size:14px;
}

/* =========================
   FOOTER
   ========================= */
.footer{padding:26px 0 40px;color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer a{color: rgba(224,122,95,0.95);text-decoration:underline;text-underline-offset:3px}
.small{font-size:13px}

/* =========================
   FORMS
   ========================= */
.form{padding:18px}

label{
  display:block;
  font-weight:900;
  font-size:13px;
  margin:12px 0 6px;
  color: var(--muted);
}

input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(61,64,91,0.18);
  background: #ffffff;
  color: var(--text);
  outline:none;
}

textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.help{font-size:13px;color:rgba(61,64,91,0.72);margin-top:10px}

/* =========================
   ACCESSIBILITY
   ========================= */
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:36px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}