/* ===========================================================================
   Ofis.fun - Design tokens (fonts + colors + type + spacing + effects + base)
   Faithful port of the Ofis.fun design system for this app.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* --- Warm neutral ink → paper ramp --- */
  --warm-950:#14110D; --warm-900:#1E1A15; --warm-800:#2C261F; --warm-700:#463E34;
  --warm-600:#6B6052; --warm-500:#8C8073; --warm-400:#B0A597; --warm-300:#D2C9BC;
  --warm-200:#E7E0D5; --warm-150:#EFE9E0; --warm-100:#F5F0E8; --warm-50:#FAF6EF; --warm-0:#FFFFFF;

  /* --- Signature accent: Vermilion --- */
  --vermilion-700:#B82E0E; --vermilion-600:#E03D14; --vermilion-500:#FF4A1C;
  --vermilion-400:#FF6A42; --vermilion-300:#FF9576; --vermilion-200:#FFC3B0;
  --vermilion-100:#FFE2D8; --vermilion-50:#FFF1EC;

  /* --- Supporting warms --- */
  --clay:#C66A3E; --saffron:#F4A52A; --ink-blue:#1F3A5F;

  /* --- Semantic status --- */
  --success-600:#2E7D55; --success-500:#3BA46C; --success-50:#E7F4ED;
  --warning-600:#C2820A; --warning-500:#E6A013; --warning-50:#FCF3DE;
  --danger-600:#C7361D; --danger-500:#E54627; --danger-50:#FCEBE6;

  /* --- Semantic aliases --- */
  --bg-page:var(--warm-50); --bg-page-alt:var(--warm-100);
  --surface-card:var(--warm-0); --surface-sunken:var(--warm-100);
  --surface-inverse:var(--warm-950); --surface-studio:var(--ink-blue);
  --text-strong:var(--warm-950); --text-body:var(--warm-800); --text-muted:var(--warm-600);
  --text-faint:var(--warm-500); --text-on-accent:var(--warm-0); --text-on-dark:var(--warm-50);
  --accent:var(--vermilion-500); --accent-hover:var(--vermilion-600); --accent-press:var(--vermilion-700);
  --accent-soft:var(--vermilion-50); --accent-soft-bd:var(--vermilion-200);
  --border-subtle:var(--warm-200); --border-default:var(--warm-300); --border-strong:var(--warm-700);
  --focus-ring:var(--vermilion-400);

  /* --- Type --- */
  --font-display:'Jost','Manrope',system-ui,sans-serif;
  --font-sans:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SF Mono',monospace;
  --eyebrow-tracking:0.14em;

  /* --- Spacing & radii --- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px;
  --radius-2xl:40px; --radius-pill:999px; --radius-photo:6px;
  --gutter:clamp(1.25rem,5vw,4rem);

  /* --- Elevation (warm-tinted) --- */
  --shadow-xs:0 1px 2px rgba(30,20,12,.06);
  --shadow-sm:0 2px 6px rgba(30,20,12,.07);
  --shadow-md:0 6px 18px rgba(30,20,12,.09);
  --shadow-lg:0 18px 44px rgba(30,20,12,.12);
  --shadow-xl:0 32px 80px rgba(30,20,12,.16);
  --shadow-photo:0 24px 60px -20px rgba(30,20,12,.30);
  --shadow-accent:0 10px 30px -8px rgba(255,74,28,.45);

  /* --- Motion --- */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --blur-sm:blur(8px); --blur-md:blur(18px); --glass-bg:rgba(250,246,239,.72);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin:0; font-family:var(--font-sans); font-size:1rem; line-height:1.55; font-weight:400;
  color:var(--text-body); background:var(--bg-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:-0.005em; color:var(--text-strong); margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:var(--accent); text-decoration:none; }
::selection { background:var(--vermilion-200); color:var(--warm-950); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

/* Mono eyebrow label */
.eyebrow { font-family:var(--font-mono); font-size:.6875rem; letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); font-weight:500; }

/* Lucide icon sizing default */
svg.lucide { width:20px; height:20px; stroke-width:2; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }