/* ==========================================================================
   Extrudo tool — "Organic" retheme.
   Loaded AFTER style.css. Remaps the tool's design tokens to the Organic
   palette and fixes the few spots that were hard-coded for the old dark
   blueprint stage (stage background, HUD, hint, primary button gradient).
   The tool markup and JS are untouched.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;600;700&family=Fredoka:wght@400;500;600;700&family=Assistant:wght@400;500;600;700&display=swap');

:root {
  --paper:      #f5ead8;   /* warm cream ground */
  --paper-2:    #f9f4ed;   /* raised panel */
  --ink:        #201e1d;
  --ink-soft:   color-mix(in srgb, #201e1d 58%, transparent);
  --line:       color-mix(in srgb, #201e1d 16%, transparent);

  --stage:      #ebddc5;   /* light warm 3D area */
  --stage-line: color-mix(in srgb, #201e1d 12%, transparent);

  --accent:     #c67139;   /* terracotta */
  --accent-600: #b2622d;
  --accent-700: #8c491a;
  --accent-tint:#fff2eb;

  /* Gradient tokens defined later in style.css — flatten to solid terracotta */
  --grad-accent:     linear-gradient(135deg, #c67139, #b2622d);
  --grad-accent-hot: linear-gradient(135deg, #c67139, #8c491a);
  --glow:            rgba(198,113,57,.36);

  --font-ui:    'Figtree', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-disp:  'Caprasimo', var(--font-ui);
}

/* Hebrew text (the tool supports Hebrew) gets the rounded Fredoka look */
[dir="rtl"] .panel h1 { font-family: 'Fredoka', sans-serif; font-weight: 600; }

/* ---- warm light stage (was a dark blueprint) ---- */
.stage {
  background: radial-gradient(130% 120% at 50% 0%, var(--color-neutral-200, #eee7db), var(--stage));
}
.stage-corners .c { border-color: color-mix(in srgb, #201e1d 26%, transparent); }
.hint { color: color-mix(in srgb, #201e1d 55%, transparent); }
.hud {
  background: color-mix(in srgb, #f9f4ed 88%, transparent);
  border: 1px solid var(--line); color: var(--ink);
}
.hud-unit { color: var(--ink-soft); }

/* ---- rounded, cohesive controls ---- */
.topbar { background: var(--paper-2); }
.panel  { background: var(--paper-2); }
.btn-ghost, .btn-outline, .field textarea, .field input[type=text], .select-wrap select { border-radius: 999px; }
.btn-primary { border-radius: 999px; }
.shape-grid { border-radius: 16px; }
.shape-grid button.active { background: var(--accent); }

/* ---- RTL (Arabic / Hebrew): the panel moves to the inline-start side ---- */
[dir="rtl"] .panel { border-left: 0; border-right: 1px solid var(--line); }

/* ---- brand mark keeps its rounded terracotta tile via --accent ---- */