/* ==========================================================================
   Aasman Fresh Daily — design tokens
   --------------------------------------------------------------------------
   The whole visual system is declared here. Nothing downstream should invent
   a colour, a radius or a shadow; if something is missing, add a token.

   Palette note: the client asked for brown and white. Rather than one flat
   brown we run a warm cocoa ramp from espresso through to cream, with a
   terracotta accent for actions. A single leaf green is reserved *only* for
   savings, freshness and success — it is never decorative, so a discount
   always reads instantly against the warm field.
   ========================================================================== */

:root {
	/* --- Cocoa ramp (brand) ------------------------------------------- */
	--af-espresso: #241410;
	--af-espresso-soft: #2f1c15;
	--af-cocoa-900: #3d2317;
	--af-cocoa-800: #4a2c1c;
	--af-cocoa-700: #5c3a21;
	--af-cocoa-600: #6f4728;
	--af-cocoa-500: #8a5e39;
	--af-clay-400: #a0764c;
	--af-clay-300: #bf9a72;
	--af-caramel: #e0a86a;
	--af-caramel-soft: #eec89b;
	--af-sand: #f3e8dc;
	--af-sand-deep: #e8d7c5;
	--af-cream: #fdf8f3;
	--af-cream-warm: #fbf1e7;
	--af-white: #ffffff;

	/* --- Accents ------------------------------------------------------ */
	--af-terracotta: #c2703d;
	--af-terracotta-dark: #a85b2c;
	--af-terracotta-soft: #f7e3d5;

	/* Reserved for savings / fresh / success only. */
	--af-leaf: #2f6b4f;
	--af-leaf-dark: #245740;
	--af-leaf-soft: #e4f0e9;

	/* Feedback */
	--af-chili: #b3402e;
	--af-chili-soft: #fae6e2;
	--af-honey: #d19a1c;
	--af-honey-soft: #fdf1d6;

	/* --- Semantic aliases --------------------------------------------- */
	--af-bg: var(--af-cream);
	--af-bg-raised: var(--af-white);
	--af-bg-sunk: var(--af-cream-warm);
	--af-bg-inverse: var(--af-cocoa-900);

	--af-ink: var(--af-espresso);
	--af-ink-soft: #5f4739;
	--af-ink-muted: #8a7362;
	--af-ink-faint: #ab9686;
	--af-ink-inverse: var(--af-cream);
	--af-ink-inverse-soft: #d9c4b2;

	--af-line: #e7d8c9;
	--af-line-soft: #f0e5d9;
	--af-line-strong: #d3bda7;

	--af-action: var(--af-cocoa-700);
	--af-action-hover: var(--af-cocoa-900);
	--af-focus: var(--af-terracotta);

	/* --- Type --------------------------------------------------------- */
	--af-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--af-font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Fluid scale. Ratio tightens on large headings so display type does not
	   run away on desktop the way pure vw scaling does. */
	--af-text-2xs: 0.6875rem;
	--af-text-xs: 0.75rem;
	--af-text-sm: 0.8125rem;
	--af-text-base: 0.9375rem;
	--af-text-md: 1rem;
	--af-text-lg: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	--af-text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
	--af-text-2xl: clamp(1.5rem, 1.1vw + 1.25rem, 2rem);
	--af-text-3xl: clamp(1.875rem, 1.9vw + 1.4rem, 2.75rem);
	--af-text-4xl: clamp(2.25rem, 3.2vw + 1.5rem, 3.75rem);
	--af-text-5xl: clamp(2.75rem, 4.6vw + 1.5rem, 4.75rem);

	--af-leading-tight: 1.08;
	--af-leading-snug: 1.25;
	--af-leading-normal: 1.5;
	--af-leading-relaxed: 1.7;

	/* Optical tracking: display type tightens, small caps open up. */
	--af-track-display: -0.022em;
	--af-track-tight: -0.011em;
	--af-track-normal: 0;
	--af-track-wide: 0.06em;
	--af-track-caps: 0.13em;

	/* --- Space -------------------------------------------------------- */
	--af-space-1: 0.25rem;
	--af-space-2: 0.5rem;
	--af-space-3: 0.75rem;
	--af-space-4: 1rem;
	--af-space-5: 1.25rem;
	--af-space-6: 1.5rem;
	--af-space-7: 2rem;
	--af-space-8: 2.5rem;
	--af-space-9: 3rem;
	--af-space-10: 4rem;
	--af-space-11: 5rem;
	--af-space-12: 6.5rem;

	/* Section rhythm is fluid so mobile does not get airless and desktop
	   does not get cavernous. */
	--af-section-y: clamp(3rem, 6vw, 6rem);
	--af-section-y-lg: clamp(4rem, 9vw, 8.5rem);

	/* --- Radii -------------------------------------------------------- */
	/* Deliberately not a uniform scale. Cards get a generous radius, inputs
	   a modest one, and tiles use an asymmetric corner so the grid reads as
	   drawn rather than generated. */
	--af-r-xs: 6px;
	--af-r-sm: 10px;
	--af-r-md: 14px;
	--af-r-lg: 20px;
	--af-r-xl: 28px;
	--af-r-2xl: 36px;
	--af-r-pill: 999px;
	--af-r-tile: 26px 26px 26px 8px;
	--af-r-tile-alt: 26px 26px 8px 26px;

	/* --- Elevation ---------------------------------------------------- */
	/* Shadows are tinted with the cocoa hue, never neutral black. A grey
	   shadow over a cream surface is the fastest way to make a warm palette
	   look cheap. */
	--af-shadow-xs: 0 1px 2px rgba(61, 35, 23, 0.06);
	--af-shadow-sm: 0 2px 6px rgba(61, 35, 23, 0.07), 0 1px 2px rgba(61, 35, 23, 0.05);
	--af-shadow-md: 0 6px 18px -6px rgba(61, 35, 23, 0.16), 0 2px 6px rgba(61, 35, 23, 0.06);
	--af-shadow-lg: 0 18px 42px -16px rgba(61, 35, 23, 0.24), 0 4px 12px rgba(61, 35, 23, 0.07);
	--af-shadow-xl: 0 34px 70px -24px rgba(36, 20, 16, 0.32), 0 8px 20px rgba(36, 20, 16, 0.08);
	--af-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

	/* Pressed-button depth, used instead of a translate on tap. */
	--af-shadow-press: inset 0 2px 5px rgba(36, 20, 16, 0.18);

	/* --- Motion ------------------------------------------------------- */
	--af-ease-out: cubic-bezier(0.22, 0.9, 0.24, 1);
	--af-ease-in-out: cubic-bezier(0.62, 0.02, 0.2, 1);
	--af-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--af-dur-fast: 140ms;
	--af-dur: 240ms;
	--af-dur-slow: 420ms;

	/* --- Layout ------------------------------------------------------- */
	--af-shell: 1240px;
	--af-shell-narrow: 780px;
	--af-shell-wide: 1440px;
	--af-gutter: clamp(1rem, 4vw, 2.5rem);
	--af-header-h: 68px;
	--af-dock-h: 64px;

	/* --- Layers ------------------------------------------------------- */
	--af-z-grain: 1;
	--af-z-sticky: 40;
	--af-z-header: 50;
	--af-z-dock: 55;
	--af-z-drawer: 60;
	--af-z-overlay: 70;
	--af-z-modal: 80;
	--af-z-toast: 90;

	/* --- Texture ------------------------------------------------------ */
	/* A fine fractal-noise tile. Flat, perfectly even colour fields are the
	   single biggest tell of a machine-made layout; ~3% grain reintroduces
	   the tooth of printed paper. */
	--af-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
	--af-grain-opacity: 0.035;

	/* Hand-drawn underline used under display headings. */
	--af-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M2 7c14-5 26-5 39-1s26 4 39 0 24-5 38-2' fill='none' stroke='%23c2703d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Dark UI surfaces flip the ink tokens rather than re-declaring colours at
   every use site. */
.af-on-dark {
	--af-ink: var(--af-cream);
	--af-ink-soft: var(--af-ink-inverse-soft);
	--af-ink-muted: #b79a85;
	--af-line: rgba(253, 248, 243, 0.16);
	--af-line-soft: rgba(253, 248, 243, 0.1);
	--af-bg-raised: rgba(253, 248, 243, 0.06);
	color: var(--af-ink);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--af-dur-fast: 0ms;
		--af-dur: 0ms;
		--af-dur-slow: 0ms;
	}
}