/* ==========================================================================
   Pickudu — semantic design tokens + baseline (Odoo 19).
   LIGHT, warm & celebratory design system: coral / apricot accents on a warm
   cream canvas, charcoal ink text. Outfit (display) / Inter (body).
   Brand primitives (--brand-*, --n-*, --r-*, --sh-*, --font-*) live in
   tokens.css, which is linked BEFORE this file. Here we derive the semantic
   layer the components use, and set the frontend baseline.
   Architecture (link tags, wrapwrap scoping) copied from theme_uvprint.
   ========================================================================== */

:root {
	/* ---- semantic surfaces (warm & light) ---- */
	--bg:          var(--brand-surface);   /* warm cream page canvas */
	--bg-2:        #FFFFFF;                 /* raised / alternating panels */
	--bg-tint:     #FDF1E9;                 /* soft coral-tinted band */
	--panel:       #FFFFFF;                 /* cards, popovers */
	--line:        var(--n-200);            /* hairline borders */
	--line-strong: var(--n-300);

	/* ---- text ---- */
	--text:        var(--brand-ink);        /* headings + primary text */
	--text-soft:   var(--n-600);            /* body copy */
	--muted:       var(--n-500);            /* meta, captions */

	/* ---- accents ---- */
	--coral:       var(--brand-coral);
	--coral-600:   var(--brand-coral-600);
	--coral-050:   var(--brand-coral-050);
	--apricot:     var(--brand-apricot);
	--success:     var(--brand-success);

	/* warm celebratory gradient (coral → apricot) */
	--grad:        linear-gradient(100deg, #F26B4E 0%, #FF8A53 55%, #FFB25E 100%);
	--grad-soft:   linear-gradient(135deg, rgba(242,107,78,0.16), rgba(255,178,94,0.16));
	--grad-warm:   radial-gradient(120% 120% at 15% 0%, #FF8358 0%, #F26B4E 45%, #E0553A 100%);

	/* ---- typography (families come from tokens.css) ---- */
	--font-display: 'Outfit Variable', system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body:    'Inter Variable', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* ---- layout ---- */
	--wrap: 1180px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--radius:    var(--r-lg);   /* 16px */
	--radius-lg: var(--r-2xl);  /* 28px */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* ---- elevation ---- */
	--shadow:      var(--sh-lg);
	--shadow-soft: var(--sh-md);
	--glow-coral:  0 16px 40px -14px rgba(242, 107, 78, 0.55);
}

/* Baseline: warm cream canvas, Inter body, Outfit display. */
#wrapwrap {
	font-family: var(--font-body);
	color: var(--text);
	background: var(--bg);
}
/* :where() keeps bare-element specificity so component classes still win. */
:where(#wrapwrap) :is(h1, h2, h3, h4) {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text);
}
::selection { background: var(--coral); color: #fff; }

/* wordmark: 'pic' in ink, 'kudu' in coral */
.brand__word--accent { color: var(--brand-coral); }