/* POUR CORNER — design tokens. Matte ink, warm paper, one vermilion. */ @font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:400;font-display:swap; src:url('../assets/fonts/arefruqaa-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC;} @font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:400;font-display:swap; src:url('../assets/fonts/arefruqaa-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:700;font-display:swap; src:url('../assets/fonts/arefruqaa-700-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC;} @font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:700;font-display:swap; src:url('../assets/fonts/arefruqaa-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap; src:url('../assets/fonts/spacegrotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap; src:url('../assets/fonts/spacegrotesk-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap; src:url('../assets/fonts/spacegrotesk-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} /* (v37) stencil face for the sack cards — stenciled producer/exporter markings like real coffee sacks. Single weight; latin subset. */ @font-face{font-family:'Saira Stencil One';font-style:normal;font-weight:400;font-display:swap; src:url('../assets/fonts/sairstencil-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} :root{ --ink:#16110d; /* matte espresso-black ground */ --ink-2:#1e1712; /* lifted panel */ --ink-3:#26201a; /* pressed / inset */ --paper:#e9dfc9; /* warm paper */ --paper-2:#d8c9ac; /* dimmer paper */ --paper-faint:rgba(233,223,201,.55); --mute:#9c8d72; /* whisper metadata on dark */ --mute-2:#6f6350; --meta-bronze:#b28e60; /* (v59) uniform card-subtitle bronze — the jute brown, user-chosen */ --line:rgba(233,223,201,.14); --line-strong:rgba(233,223,201,.28); --verm:#d9381e; /* the one electric accent — liberation red */ --verm-deep:#8f2412; --crema:#d3ac76; /* caramel tan — numerals, signature marks, hover */ --bean:#3d2617; /* roasted bean brown */ --card:#3a2b1c; /* lighter warm-brown card ground — reads as a card, stays in the palette */ --card-cream:#e9d9b4; /* warm cream card ground — recipe library, dark ink text on top */ --cream-line:#c2a06a; /* hairline for cream cards */ --on-cream:#201811; /* espresso ink text on cream */ --on-cream-mute:#6a5839; /* muted brown metadata on cream */ /* talismanic glyph card texture — a detail of the user's own Koraïchi artwork (assets/texture/card-glyphs.png), recolored from its deep-blue original into the cream scheme: abstract gold glyphs redrawn as faint dark-bronze linework on paper cream, low alpha so it reads as a subtle artistic ground behind dark ink text. Abstract marks only — not readable text. Tiles at 300px with per-card offsets (see views); text stays crisp. Shared by recipe, stats, sheet, guided-brew and now-brewing cards. (v36: replaces the earlier calligraphic texture, which read as too religious.) (v37: SUPERSEDED — the sack re-skin drops glyphs from all cards; token and asset file kept, no longer referenced.) */ --card-glyph:url('../assets/texture/card-glyphs.png'); /* (v34, experimental) aged-paper grain for the cream cards: fine feTurbulence paper fiber + a very low-frequency warm mottle for age, baked into one SVG (no CSS gradients needed). Tiles at 220px as the top background layer above --card-glyph; whisper-subtle and strictly behind the text. Delete the --card-grain layer from the card rules to revert. v35: turned up ~2.2x — user could not see the v34 whisper version. */ --card-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' stitchTiles='stitch' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0.34 0 0 0 0 0.23 0 0 0 0 0.12 0 0 0 0.75 0' result='ga'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='4' stitchTiles='stitch' result='m'/%3E%3CfeColorMatrix in='m' type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.31 0 0 0 0 0.18 0 0 0 0.45 0' result='ma'/%3E%3CfeMerge%3E%3CfeMergeNode in='ma'/%3E%3CfeMergeNode in='ga'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); --cherry:#a11f14; /* coffee-cherry */ --cherry-deep:#6e1a0e; /* deep coffee-cherry */ --gold:#c8a24a; /* tibeb gold */ --hill-mid:#0f1a14; /* treeline wave fill — barely green, mostly dark; also the masthead ground (v20: one step darker) */ --mast-tint:rgba(15,26,20,.85); /* (v38) translucent masthead ground: hero content visibly scrolls beneath it; flat tint, no blur (no glassmorphism) */ --on-paper:#1d1712; --on-paper-mute:#5c5245; --ok:#7ba05b; --disp:'Aref Ruqaa',serif; --body:'Space Grotesk',system-ui,sans-serif; /* (v37) stencil face for sack-card markings */ --stencil:'Saira Stencil One','Space Grotesk',system-ui,sans-serif; /* (v37) burlap sack ground — tiles at 240px. Replaces the aged-paper cream cards (v34–v36); the --card-grain/--card-glyph tokens below are now unused (asset files left in place). */ --sack-burlap:url('../assets/texture/sack-burlap.png'); --sack-ground:#b28e60; /* jute base under the weave tile */ --sack-ink:#2b1e10; /* dark umber stencil ink on burlap */ --sack-ink-soft:#4c3619; /* softer umber for secondary sack text */ --r:3px; --tap:48px; --max:1120px; --pad:clamp(16px,4vw,40px); }