/* Reckon — base layer: resets, document defaults, shared primitives. */
*,*::before,*::after{box-sizing:border-box;border-color:var(--border)}
html{-webkit-text-size-adjust:100%}
body{margin:0;position:relative;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
code,kbd,samp,pre{font-family:var(--font-mono)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--foreground);text-decoration:none}
a:hover{color:var(--foreground);text-decoration:underline;text-underline-offset:4px}
::selection{background:color-mix(in srgb,var(--foreground) 14%,transparent)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--ring) 50%,transparent);outline-offset:1px}

/* wordmark / display lockup */
.o-wordmark{font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--text-2xl);font-variation-settings:var(--font-variation-display);letter-spacing:var(--tracking-tight);line-height:1}

/* text roles */
.o-muted{color:var(--muted-foreground)}
.o-heading{font-family:var(--font-heading);font-weight:var(--font-weight-semibold)}
.o-mono{font-family:var(--font-mono)}
.o-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-4)}
@media(min-width:1024px){.o-container{padding-inline:var(--space-6)}}

/* the Reckon hairline: a 1px inset highlight layer inside a bordered surface.
   Light mode lights the top edge; dark mode lights the bottom edge. */
.o-hairline{position:relative}
.o-hairline::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--hairline)}

.o-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* every icon in Reckon is a 16px (desktop) lucide stroke glyph at 80% opacity */
.o-icon{width:16px;height:16px;flex:none;stroke-width:2;opacity:.8;pointer-events:none}
.o-icon--full{opacity:1}

.o-stack{display:flex;flex-direction:column;gap:var(--space-2)}
.o-row{display:flex;align-items:center;gap:var(--space-2)}
