/*
 * TopGrade Accounting brand layer — logo colours per theme + brand accent.
 * Source of truth: resources/brand/topgrade-accounting/ (themes/logo-theme-map.json, brandkit/brand_colors.css).
 *
 *   --logo-circle        circle fill on neutral surfaces   (= theme primary; exact brand navy on "topgrade")
 *   --logo-circle-brand  circle fill on brand-coloured chrome (navbar / login panel) — a shade of the same family
 *   --logo-accent        the "gold" parts of the mark        (brand gold on "topgrade", the theme's own tint elsewhere)
 *   --brand-accent       alias used by loaders, progress bar, favourites
 *   --brand-navy/--brand-gold/--brand-dark  fixed brand colours (never themed)
 */
:root {
  --brand-navy: #1e3a5f;
  --brand-gold: #F5B301;
  --brand-gold-deep: #D99A00;
  --brand-dark: #1F2937;
  --font-brand: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --logo-circle: var(--color-primary, #1e3a5f);
  --logo-circle-brand: #24476F;
  --logo-accent: #F5B301;
  --logo-word-accent: var(--color-accent, var(--color-primary, #1e3a5f));
  --brand-accent: var(--logo-accent);
}

/* per-theme logo family (themes/logo-theme-map.json) */
[data-theme="topgrade"], [data-theme="navy"] { --logo-circle-brand: #24476F; --logo-accent: #F5B301; --logo-word-accent: #F5B301; }
[data-theme="odoo"]          { --logo-circle-brand: #5A3A52; --logo-accent: #E6A8D4; }
[data-theme="international"],
[data-theme="blue"],
[data-theme="pos-modern"]    { --logo-circle-brand: #00509E; --logo-accent: #8CC8FF; }
[data-theme="academic"]      { --logo-circle-brand: #0B7A70; --logo-accent: #7EF0DD; }
[data-theme="modern"]        { --logo-circle-brand: #0846A8; --logo-accent: #A8C7FA; }
[data-theme="decent"],
[data-theme="multi"]         { --logo-circle-brand: #1D4FC4; --logo-accent: #BFDBFE; }
[data-theme="green"]         { --logo-circle-brand: #2E7D32; --logo-accent: #A5D6A7; }
[data-theme="purple"],
[data-theme="premium"]       { --logo-circle-brand: #58157F; --logo-accent: #E1A6F0; }
[data-theme="orange"]        { --logo-circle-brand: #BF4400; --logo-accent: #FFD199; }
[data-theme="ocean"]         { --logo-circle-brand: #025584; --logo-accent: #93DBFF; }
[data-theme="dark"]          { --logo-circle: #1F2937; --logo-circle-brand: #1F2937; --logo-accent: #64B5F6; --logo-word-accent: #64B5F6; }
[data-theme="highcontrast"]  { --logo-circle: #000000; --logo-circle-brand: #000000; --logo-accent: #FFD600; --logo-word-accent: #000000; }

/* TopGrade theme: brand font (Poppins) for the whole UI */
[data-theme="topgrade"] {
  --font-sans: var(--font-brand);
  --font-heading: var(--font-brand);
  --o-font: var(--font-brand);
  --o-font-heading: var(--font-brand);
}

/* ---- the inline-SVG logo (Components/BrandLogo.vue) ---- */
.tg-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: calc(var(--tg-logo-h, 32px) * 0.14);
  height: var(--tg-logo-h, 32px);
  line-height: 0;
  vertical-align: middle;
  direction: ltr;                       /* the wordmark is a picture: keep mark → text order in RTL */
  --_circle: var(--logo-circle);
  --_accent: var(--logo-accent);
  --_word: var(--logo-word-accent);
  --_ring: transparent;
  --_ring-w: 0;
}
.tg-logo-mark { display: block; height: 100%; width: auto; aspect-ratio: 1 / 1; overflow: visible; }
.tg-logo-word { display: block; height: 100%; width: auto; aspect-ratio: 2180 / 830; }
.tg-logo-circle { fill: var(--_circle); stroke: var(--_ring); stroke-width: var(--_ring-w); }
.tg-logo-gap { fill: var(--_circle); stroke: var(--_circle); }
.tg-logo-accent { fill: var(--_accent); }
.tg-logo-white { fill: #fff; }
.tg-logo-word-name { fill: currentColor; }
.tg-logo-word-accent { fill: var(--_word); }

/* on brand-coloured chrome: family shade + light ring, white wordmark */
.tg-logo--on-brand {
  color: #fff;
  --_circle: var(--logo-circle-brand, var(--logo-circle));
  --_word: var(--logo-accent);
  --_ring: rgba(255, 255, 255, 0.55);
  --_ring-w: 34;
}
/* dark surfaces (dark mode toggle or the Dark theme): ring so the disc separates from the canvas, light accent for the wordmark */
html.dark .tg-logo:not(.tg-logo--on-brand),
[data-mode="dark"] .tg-logo:not(.tg-logo--on-brand),
[data-theme="dark"] .tg-logo:not(.tg-logo--on-brand) {
  --_word: var(--logo-accent);
  --_ring: rgba(255, 255, 255, 0.3);
  --_ring-w: 34;
}
/* high contrast: solid 2px white ring on the black chrome */
[data-theme="highcontrast"] .tg-logo--on-brand,
[data-theme="highcontrast"].dark .tg-logo { --_ring: #ffffff; --_ring-w: 60; }

/* navbar on phones: icon only (unlayered so it beats .tg-logo-word above) */
@media (max-width: 767px) { .o-navbar-logo .tg-logo-word { display: none; } }

*{box-sizing:border-box}html{scroll-behavior:smooth}body.product-home{margin:0;font-family:var(--font-sans,Inter,system-ui,sans-serif);color:var(--color-text-primary,#1f2937);background:var(--color-bg,#f5f7fb);line-height:1.6}.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}a{color:inherit}.skip-link{position:absolute;left:16px;top:-100px;padding:12px;background:var(--color-surface,#fff);z-index:10}.skip-link:focus{top:12px}a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--color-primary,#1e3a5f);outline-offset:5px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:104px;border-bottom:1px solid var(--color-border,#dce3ec)}.product-brand{display:flex;align-items:center;width:174px;flex-shrink:0;text-decoration:none}.product-brand img{width:166px;height:auto;max-height:72px;object-fit:contain}.product-brand svg{width:166px;height:auto;max-height:66px}.brand-dark{display:none}html.dark .brand-light,html[data-theme=dark] .brand-light{display:none}html.dark .brand-dark,html[data-theme=dark] .brand-dark{display:block}nav,.header-actions{display:flex;align-items:center;gap:24px}nav a{text-decoration:none;font-size:.9rem;font-weight:650}nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.header-actions{gap:16px}.theme-picker{display:grid;gap:2px;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary,#55647a)}.theme-picker select{font:inherit;font-size:.8rem;letter-spacing:0;text-transform:none;border:1px solid var(--color-border,#dce3ec);border-radius:7px;padding:5px 9px;color:var(--color-text-primary,#1f2937);background:var(--color-surface,#fff);max-width:142px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 20px;background:var(--color-primary,#1e3a5f);color:var(--color-on-primary,#fff);border:1px solid var(--color-primary,#1e3a5f);border-radius:9px;text-decoration:none;font-weight:700;font-size:.95rem;white-space:nowrap}.button:hover{filter:brightness(1.1)}.button-small{padding:10px 17px;font-size:.85rem}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:64px;padding-block:76px 86px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;font-weight:800;color:var(--color-primary,#1e3a5f);margin:0 0 16px}h1,h2,h3{line-height:1.15;letter-spacing:-.035em}h1{font-size:clamp(2.7rem,4.7vw,4.5rem);margin:0 0 24px;font-weight:800}.lead{font-size:1.04rem;color:var(--color-text-secondary,#55647a);max-width:600px;line-height:1.85}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}.text-link{font-weight:700;text-decoration:none;font-size:.9rem}.workflow{border:1px solid var(--color-border,#dce3ec);border-radius:18px;background:var(--color-surface,#fff);box-shadow:0 20px 65px color-mix(in srgb,var(--color-primary,#1e3a5f) 12%,transparent);overflow:hidden}.window-bar{display:flex;align-items:center;gap:5px;padding:16px 20px;border-bottom:1px solid var(--color-border,#dce3ec);background:color-mix(in srgb,var(--color-primary,#1e3a5f) 5%,var(--color-surface,#fff))}.window-bar i{width:7px;height:7px;border-radius:50%;background:var(--color-primary,#1e3a5f);opacity:.35}.window-bar span{font-size:.65rem;margin-left:9px;font-weight:650;color:var(--color-text-secondary,#55647a)}.workflow-content{padding:28px}.workflow h2{font-size:1.6rem;margin:0 0 25px}.workflow ol{list-style:none;padding:0;display:grid;gap:11px;margin:0}.workflow li{display:flex;gap:15px;align-items:flex-start;padding:16px;border:1px solid var(--color-border,#dce3ec);border-radius:10px}.step-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:8px;background:color-mix(in srgb,var(--color-primary,#1e3a5f) 10%,var(--color-surface,#fff));color:var(--color-primary,#1e3a5f);font-size:.75rem;font-weight:800}.workflow h3{font-size:.88rem;letter-spacing:-.01em;margin:2px 0 5px}.workflow li p{font-size:.75rem;line-height:1.65;margin:0;color:var(--color-text-secondary,#55647a)}.sample-note{font-size:.62rem;color:var(--color-text-muted,#68758b);margin:18px 0 0}.features-section{padding-block:30px 72px}.features-section>h2{font-size:clamp(1.9rem,3vw,2.8rem);max-width:690px;margin:0 0 32px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.feature-grid article{padding:26px;border:1px solid var(--color-border,#dce3ec);background:var(--color-surface,#fff);border-radius:12px}.feature-index{font-size:.65rem;letter-spacing:.12em;font-weight:700;color:var(--color-primary,#1e3a5f)}.feature-grid h3{font-size:1.12rem;letter-spacing:-.02em;margin:20px 0 12px}.feature-grid p{font-size:.85rem;line-height:1.8;margin:0;color:var(--color-text-secondary,#55647a)}.faq-section{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;padding-block:48px 76px;border-top:1px solid var(--color-border,#dce3ec)}.faq-section h2{font-size:2.3rem;margin:0 0 25px}.faq-list details{padding:19px 0;border-bottom:1px solid var(--color-border,#dce3ec)}summary{cursor:pointer;font-size:.9rem;font-weight:700}.faq-list p{font-size:.85rem;color:var(--color-text-secondary,#55647a);line-height:1.8}.contact-section{display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid var(--color-border,#dce3ec);padding-block:48px}.contact-section h2{font-size:2.3rem;margin:0 0 16px}.contact-section p:not(.eyebrow){font-size:.9rem;max-width:650px;color:var(--color-text-secondary,#55647a)}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--color-border,#dce3ec);padding-block:25px}.site-footer p,.site-footer nav a{font-size:.72rem;color:var(--color-text-secondary,#55647a)}@media(max-width:1000px){.site-header>nav{display:none}.hero{gap:32px;padding-block:54px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-section{gap:32px}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.site-header{min-height:90px;gap:12px}.product-brand{width:136px}.product-brand img,.product-brand svg{width:136px}.header-actions{gap:9px}.theme-picker{max-width:95px}.theme-picker select{max-width:95px;font-size:.7rem}.button-small{padding:9px 12px}.hero{grid-template-columns:1fr;gap:34px;padding-block:42px 50px}h1{font-size:clamp(2.5rem,9vw,3.6rem)}.lead{font-size:.96rem}.workflow-content{padding:22px}.feature-grid{grid-template-columns:1fr}.features-section{padding-bottom:46px}.faq-section{grid-template-columns:1fr;padding-block:36px}.contact-section{align-items:flex-start;flex-direction:column;padding-block:35px}.site-footer{align-items:flex-start;flex-direction:column}.site-footer nav{gap:18px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}