/* =========================================================================== Awre · Base / reset helpers --------------------------------------------------------------------------- Light, optional resets + a few utility primitives consumers can rely on. Tokens only — no component styling here. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } ::selection { background: var(--selection); } :root { color-scheme: light; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Optional body baseline — opt in by adding class="awre" to */ .awre { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--body-size); line-height: var(--body-leading); font-weight: var(--weight-regular); } /* ---- Reusable text roles ------------------------------------------------ */ .awre-display { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink); } .awre-display em, .awre-display i { font-style: normal; background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent; } .awre-label { font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); font-weight: var(--weight-regular); } .awre-body { font-family: var(--font-sans); font-size: var(--body-size); line-height: var(--leading-relaxed); color: var(--ink-2); } /* ---- Grain — the signature paper texture, as a utility ------------------ */ /* Apply .awre-grain to any element for the subtle living-paper tooth. */ .awre-grain { position: relative; } .awre-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }