/* ==========================================================================
   Artesano de Mexico — Design Tokens
   Mirrors the Claude Design source of truth (app/colors_and_type.css).
   Variable names are kept identical to that file on purpose — do not invent
   a local prefix, so the design project and this theme never need mental
   translation. theme.json covers what the block editor's color/type pickers
   need; this file covers everything theme.json cannot express (semantic
   surface/text/action layer, spacing, radii, shadow, motion).
   ========================================================================== */

:root {
	/* -------- Brand palette (raw) -------- */
	--charcoal:        #2C2C2A;
	--charcoal-2:      #3A3A37;
	--amber:           #F5A623;
	--amber-hover:     #C97D10;
	--terracotta:      #8B2500;
	--cobalt:          #1B3A6B;
	--forest:          #1E3D2F;
	--warm-brown:      #7A3F1E;
	--leather:         #6B1A1A;

	--tal-yellow:      #F2B824;
	--tal-orange:      #E07A1F;
	--tal-red:         #C8321B;
	--tal-cobalt:      #2455A8;
	--tal-teal:        #5BA9A1;
	--tal-green:       #2E7A4A;

	--cream:           #F7F2EB;
	--cream-2:         #EFE8DC;
	--paper:           #FBF8F3;
	--white:           #FFFFFF;

	/* -------- Neutrals (warm) -------- */
	--taupe-700:       #5A5450;
	--taupe-600:       #7A6A5A;
	--taupe-500:       #9A8F86;
	--taupe-300:       #C9BFB2;
	--border:          #E6DED0;
	--border-strong:   #D6CBB7;

	/* -------- Semantic surfaces -------- */
	--bg:              var(--cream);
	--bg-elevated:     var(--paper);
	--bg-inverse:      var(--charcoal);
	--bg-sunken:       var(--cream-2);

	/* -------- Semantic text -------- */
	--fg:              var(--charcoal);
	--fg-2:            var(--taupe-700);
	--fg-3:            var(--taupe-500);
	--fg-on-dark:      var(--cream);
	--fg-link:         var(--charcoal);
	--fg-link-hover:   var(--terracotta);

	/* -------- Semantic actions / status -------- */
	--action:          var(--amber);
	--action-hover:    var(--amber-hover);
	--action-fg:       var(--charcoal);
	--success:         var(--forest);
	--error:           var(--terracotta);
	--info:            var(--cobalt);

	/* -------- Type families -------- */
	--font-display:    "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* -------- Type scale (px in a 16px-base system) -------- */
	--fs-12: 0.75rem;
	--fs-13: 0.8125rem;
	--fs-14: 0.875rem;
	--fs-16: 1rem;
	--fs-18: 1.125rem;
	--fs-20: 1.25rem;
	--fs-24: 1.5rem;
	--fs-32: 2rem;
	--fs-44: 2.75rem;
	--fs-64: 4rem;
	--fs-80: 5rem;

	/* -------- Line-height -------- */
	--lh-tight:   1.1;
	--lh-snug:    1.2;
	--lh-base:    1.5;
	--lh-loose:   1.65;

	/* -------- Letter-spacing -------- */
	--ls-tight:   -0.01em;
	--ls-normal:   0em;
	--ls-eyebrow:  0.12em;

	/* -------- Spacing (4px base) -------- */
	--sp-1:    4px;
	--sp-2:    8px;
	--sp-3:    12px;
	--sp-4:    16px;
	--sp-6:    24px;
	--sp-8:    32px;
	--sp-12:   48px;
	--sp-16:   64px;
	--sp-24:   96px;
	--sp-32:  128px;

	/* -------- Radii -------- */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 12px;
	--radius-pill: 999px; /* filter chips only */

	/* -------- Shadows -------- */
	--shadow-sm: 0 1px 2px rgba(44, 44, 42, 0.06);
	--shadow-md: 0 8px 24px rgba(44, 44, 42, 0.10);
	--shadow-focus: 0 0 0 3px rgba(245, 166, 35, 0.35);

	/* -------- Borders -------- */
	--border-width: 1px;
	--border-hair:  1px solid var(--border);

	/* -------- Motion -------- */
	--ease:        cubic-bezier(0.2, 0, 0, 1);
	--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast:    150ms;
	--dur-base:    250ms;
	--dur-slow:    400ms;

	/* -------- Layout -------- */
	--content-max:   1280px;
	--content-pad:   24px;
	--header-h:      72px;
}

body {
	background: var(--bg);
}