/* getwiseledger.com — THE shared foundation. Everything in here is declared ONCE
 * and loaded by all 14 pages: public/*.html link it, and src/styles/base.css
 * @imports it so Vite folds it into the Astro bundle.
 *
 * Three sections, in cascade order:
 *   1. @font-face   self-hosted Syne + DM Sans
 *   2. :root        colour, type and radius tokens
 *   3. .nav         the pill, the one component that must be identical everywhere
 *
 * It was called tokens.css until it held more than tokens. If you add a second
 * component here, that is fine — but say so at the top.
 */

/* Self-hosted Syne + DM Sans (variable woff2, latin + latin-ext subsets).
 * ONE declaration for all 14 pages. Was inline in public/index.html AND in
 * src/styles/base.css, and the seven other public pages were still fetching
 * these two families from fonts.googleapis.com instead.
 *
 * The two latin files are PRELOADED in each page's <head>, first, ahead of
 * everything render-blocking including this file. That is what makes
 * font-display:swap invisible: the bytes are already in cache by the time
 * these rules bind them. Removing a preload re-opens the hero CLS (0.208).
 */
@font-face{font-family:'Syne';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/syne-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/syne-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/dmsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/dmsans-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* THE PILL NAV — one declaration for all 14 pages.
 *
 * The seven public pages outside the landing page used to render a different
 * component: position:fixed;top:0;left:0;right:0, 64px tall, full-bleed, with a
 * backdrop-filter and a bottom border. Going from the homepage to Terms changed
 * the shape of the navigation, which reads as a different site — on exactly the
 * pages where someone is deciding whether to trust us with their books.
 *
 * The pill is already proven over light content: it floats over the white
 * Features section on the landing page and over every blog article.
 */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;height:58px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 12px 0 24px;width:calc(100% - 36px);max-width:1080px;background:rgba(13,17,23,0.92);border:1px solid rgba(255,255,255,0.09);border-radius:var(--r-pill);box-shadow:0 10px 40px rgba(13,17,23,.4)}
.nav-logo{font-family:var(--hd);font-size:20px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;cursor:pointer}
.logo-pip{width:8px;height:8px;background:var(--green);border-radius:50%}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-a{padding:8px 12px;font-size:14px;color:rgba(255,255,255,.65);border-radius:var(--r-ctl);cursor:pointer;transition:color .2s,background .2s;font-weight:400;white-space:nowrap}
.nav-a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-a.active{color:#fff}
.nav-cta{padding:9px 18px;font-size:14px;font-weight:600;color:var(--dark);background:var(--green);border-radius:var(--r-ctl);cursor:pointer;border:none;font-family:var(--bd);transition:background .2s,transform .12s}
.nav-cta:hover{background:var(--green-dark)}
.nav-cta:active{transform:scale(.97)}
@media(max-width:600px){
  .hide-mob{display:none}
  .nav{padding:0 10px 0 18px;top:10px;width:calc(100% - 24px);gap:12px}
}

/* THE PRIMARY BUTTON — shared for the same reason as the nav: it is the site's
 * main CTA and it appears on the landing page AND on every blog post. It was
 * declared twice until now.
 *
 * :active is the point of this rule. Nothing on this site acknowledged a press —
 * .btn-p lifted 1px on hover and then did nothing when you actually clicked it.
 * scale(.97) over 120ms is the cheapest signal that the interface heard you, and
 * it lands on the button that matters most.
 */
.btn-p{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:var(--green);color:var(--dark);font-size:15px;font-weight:600;border-radius:var(--r-ctl);cursor:pointer;border:none;font-family:var(--bd);transition:background .2s,transform .15s}
.btn-p:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn-p:not([disabled]):active{transform:scale(.97);transition-duration:.12s}

/* KEYBOARD FOCUS — one ring, all 14 pages.
 *
 * Two inputs styled their own :focus and nothing else on the site had any focus
 * style at all, so every button, nav item, footer link and FAQ row fell back to
 * the UA default outline, which on #07090E is close to invisible.
 *
 * :focus-visible, not :focus, so a mouse click on a button does not leave a ring
 * behind. Text inputs still show it on click — browsers treat a focused text
 * field as focus-visible, which is what you want when typing is next.
 *
 * The colour has to clear 3:1 against the ground it sits on, and one green
 * cannot do both (measured):
 *
 *   #22C55E on #07090E  8.74    #22C55E on #FFFFFF  2.28  FAILS
 *   #16A34A on #FFFFFF  3.30    #16A34A on #F9FAFB  3.15
 *
 * So --ring is the bright green by default, which covers the dark chrome (nav,
 * hero, showcase, how-it-works, FAQ, final CTA, footer), and the light
 * containers re-declare it to --green-dark. It inherits, so a container is all
 * it takes.
 *
 * outline rather than box-shadow: it follows border-radius, it survives
 * forced-colors mode, and outline-offset keeps it clear of a green button's own
 * fill instead of disappearing into it. */
:root{--ring:var(--green)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.sec,.pc,.sub-card,.fb-card,.blog-wrap,.post,.legal,.abt-body,.contact-box,.method,main{--ring:var(--green-dark)}

/* getwiseledger.com design tokens — THE single source.
 *
 * Before this file these 17 custom properties were declared nine times: once in
 * public/index.html, once in src/styles/base.css, and once in each of the seven
 * other public/ pages. Every value agreed, but the NAMES had already drifted —
 * #DCFCE7 was `--green-bg` on the landing and template pages and `--green-soft`
 * on confirm/unsubscribe. That is what a ninth copy buys you.
 *
 * Consumed two ways, one file:
 *   - public/*.html  link it directly (<link rel="stylesheet" href="/css/site.css">)
 *   - Astro pages    src/styles/base.css @imports it by relative path, so Vite
 *                    inlines it into the bundled stylesheet — no extra request
 *
 * On the landing page the link sits AFTER the two font preloads, which must stay
 * first in <head>: they are what makes font-display:swap invisible there, and
 * they are the whole hero-CLS fix (CrUX 0.208 -> 0). Do not move them.
 */
:root {
  /* Brand green. --green is the accent everywhere; --green-dark is hover/press
     only. The app (app.getwiseledger.com) currently uses --green-dark's value as
     its primary accent — a known divergence, tracked separately. */
  --green: #22C55E;
  --green-dark: #16A34A;
  --green-xl: #0D9D45;
  --green-bg: #DCFCE7;
  --green-pale: #F0FDF4;

  /* Dark surfaces, lightest to darkest in use: --dark3 < --dark2 < --dark.
     #07090E (page/footer ground) is deliberately NOT a token: it is the one
     value that must never be swapped for another dark, so it stays literal. */
  --dark: #0D1117;
  --dark2: #161B22;
  --dark3: #21262D;

  /* Text and lines */
  --text: #1F2937;
  --muted: #6B7280;
  /* --light is a LINE colour, not a text colour: 2.5:1 on --bg and 2.4:1 on
     --surface, so it fails AA 4.5:1 as body copy. It is for borders, and for
     placeholder text on the dark sticky bar, where it reads 7.5:1. Muted text
     on a light surface is --muted (4.8:1 on --bg, 4.6:1 on --surface). */
  --light: #9CA3AF;
  --border: #E5E7EB;

  /* Light surfaces */
  --bg: #FFFFFF;
  --surface: #F9FAFB;

  /* Destructive */
  --red: #EF4444;
  --red-bg: #FEE2E2;

  /* Type. --hd is the display face (Syne), --bd the body face (DM Sans). */
  --hd: 'Syne', sans-serif;
  --bd: 'DM Sans', sans-serif;

  /* Corner radius — FOUR values, and the rule for picking one:
   *
   *   --r-pill   fully rounded. The nav shell, badges, the pricing toggle.
   *   --r-card   anything that holds other content: cards, panels, dialogs,
   *              the sticky bar, an open FAQ row.
   *   --r-ctl    anything you click or type into: buttons, inputs.
   *   --r-chip   a small square affordance sitting INSIDE a card: icon tiles.
   *
   * The page had twelve radii before this and two of them were button radii
   * (.btn-p at 10px next to .nav-cta at 8px), which is the kind of thing nobody
   * can name but everybody sees.
   *
   * TWO DOCUMENTED EXCEPTIONS, deliberately left as literals:
   *   - 50% for circles (dots, the step numerals, the check marks)
   *   - device frames: .phone 38px, .show-phone 34px, .sub-media .show-phone
   *     26px, and the notch/home bars inside them. A real phone's corner radius
   *     scales with its size; forcing one value across three widths looks wrong
   *     at the small end. These are illustration, not UI chrome.
   *
   * The app uses --radius: 0.875rem (14px) with derived lg/md/sm. Aligning the
   * two scales is the open cross-repo question; this file at least gives the
   * site one to align FROM.
   */
  --r-pill: 100px;
  --r-card: 16px;
  --r-ctl: 10px;
  --r-chip: 12px;
}