/* Roamn — Effects: radii, borders, shadows, texture Soft rounded cards, hairline sand borders, dashed "field-notebook" dividers, and warm brown-tinted shadows. */ :root { /* ---- Corner radii ---- */ --radius-xs: 6px; /* small chips, tiny tags */ --radius-sm: 10px; /* stat tiles, note boxes */ --radius-md: 12px; /* buttons, category tiles */ --radius-lg: 14px; /* cards, list icons */ --radius-xl: 16px; /* primary cards */ --radius-2xl: 18px; /* sheets, passport panels */ --radius-phone: 25px;/* phone screen */ --radius-pill: 30px; /* search bars, chips-as-pills */ --radius-round: 50%; /* Teardrop map-pin shape (rotate -45deg to point) */ --shape-pin: 50% 50% 50% 0; /* @kind radius */ /* ---- Borders ---- */ --border-w: 1px; --border: 1px solid var(--sand-line); --border-dashed: 2px dashed var(--sand-line); /* section dividers */ --border-dashed-thin: 1px dashed var(--sand-line); /* inner rows */ /* ---- Shadows (warm, tinted with ink 42,37,32) ---- */ --shadow-sm: 0 4px 9px rgba(42, 37, 32, 0.14); /* floating controls */ --shadow-md: 0 5px 16px rgba(42, 37, 32, 0.14); /* map buttons */ --shadow-lg: 0 10px 26px rgba(42, 37, 32, 0.20); /* bottom sheets */ --shadow-phone: 0 20px 50px -18px rgba(42, 37, 32, 0.55); /* device */ --shadow-pin: 0 5px 11px rgba(42, 37, 32, 0.32); /* map markers */ /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 0.15s; /* @kind other */ --dur: 0.2s; /* @kind other */ --dur-reveal: 0.7s; /* @kind other */ } /* ---- Paper grain texture ---- A faint dotted overlay that gives every surface a printed-paper feel. Apply to a fixed full-bleed ::before, or use --paper-grain as a background layer. */ :root { --paper-grain: radial-gradient(var(--ink) 0.5px, transparent 0.5px); /* @kind other */ --paper-grain-size: 5px 5px; --paper-grain-opacity: 0.04; /* @kind other */ } /* Utility: drop this class on for the signature grain overlay */ .roamn-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--paper-grain-opacity); background-image: var(--paper-grain); background-size: var(--paper-grain-size); }