/* ============================================================
   URBINO DESIGN TOKENS · LAYER 1 — PRIMITIVES
   World-independent raw values. The vocabulary of the system.

   These tokens are the bottom of the stack. They are referenced
   by semantic tokens (layer 2), never directly by components.

   See tokens/README.md for the full architecture.
   ============================================================ */

:root {

  /* ============================================================
     COLOR PRIMITIVES — Urbino Blue (brand)
     ============================================================ */

  --u-blue-50:  #EEF3FE;
  --u-blue-100: #DBE5FD;
  --u-blue-200: #BCCFFB;
  --u-blue-300: #8FB0F8;
  --u-blue-400: #5C8AF3;
  --u-blue-500: #2E63EB;   /* BRAND — logo */
  --u-blue-600: #1F4BD1;
  --u-blue-700: #1B3DAB;
  --u-blue-800: #1B358A;
  --u-blue-900: #1B3070;
  --u-blue-950: #131F45;


  /* ============================================================
     COLOR PRIMITIVES — Neutrals (cool slate, both worlds)
     ============================================================ */

  --u-slate-0:    #FFFFFF;
  --u-slate-25:   #FBFCFD;
  --u-slate-50:   #F8FAFC;   /* surface-2 */
  --u-slate-75:   #F4F6FA;   /* canvas / page bg */
  --u-slate-100:  #F1F5F9;
  --u-slate-150:  #E8ECF2;   /* border */
  --u-slate-200:  #E2E8F0;
  --u-slate-300:  #CBD5E1;
  --u-slate-400:  #94A3B8;   /* text-3 / muted */
  --u-slate-500:  #64748B;   /* text-2 / secondary */
  --u-slate-600:  #475569;
  --u-slate-700:  #334155;
  --u-slate-800:  #1E293B;
  --u-slate-900:  #0F172A;   /* text */
  --u-slate-1000: #000000;


  /* ============================================================
     COLOR PRIMITIVES — Semantic accents
     ============================================================ */

  --u-green-500: #059669;
  --u-green-100: #ECFDF5;
  --u-green-700: #047857;

  --u-amber-500: #D97706;
  --u-amber-100: #FFFBEB;
  --u-amber-700: #B45309;

  --u-red-500: #DC2626;
  --u-red-100: #FEF2F2;
  --u-red-700: #B91C1C;

  --u-violet-500: #7C3AED;   /* "info" / "ötlet" accent */
  --u-violet-100: #F5F3FF;
  --u-violet-700: #6D28D9;

  --u-teal-500: #0D9488;     /* field-worker app — reserved */
  --u-teal-100: #CCFBF1;
  --u-teal-700: #0F766E;


  /* ============================================================
     STATUS PALETTE — Issue lifecycle
     Aligned with screen labels in production-near reference.
     ============================================================ */

  /* Új — pre-triage, neutral grey */
  --u-status-uj-bg:           var(--u-slate-100);
  --u-status-uj-fg:           var(--u-slate-700);
  --u-status-uj-dot:          var(--u-slate-400);

  /* Jóváhagyva — triaged, accepted into queue */
  --u-status-jovahagyva-bg:   var(--u-blue-50);
  --u-status-jovahagyva-fg:   var(--u-blue-700);
  --u-status-jovahagyva-dot:  var(--u-blue-500);

  /* Folyamatban — work started */
  --u-status-folyamatban-bg:  #FEF3E2;          /* warm amber-tint */
  --u-status-folyamatban-fg:  var(--u-amber-700);
  --u-status-folyamatban-dot: var(--u-amber-500);

  /* Megoldódott / Megoldva — resolved */
  --u-status-megoldva-bg:     var(--u-green-100);
  --u-status-megoldva-fg:     var(--u-green-700);
  --u-status-megoldva-dot:    var(--u-green-500);

  /* Elutasítva — manager-internal only; NEVER shown to citizens */
  --u-status-elutasitva-bg:   var(--u-red-100);
  --u-status-elutasitva-fg:   var(--u-red-700);
  --u-status-elutasitva-dot:  var(--u-red-500);


  /* ============================================================
     SPACING PRIMITIVES — 4-based scale
     Same scale across both worlds; density differences are
     expressed at the semantic layer, not the primitive layer.
     ============================================================ */

  --u-space-1:  4px;
  --u-space-2:  8px;
  --u-space-3:  12px;
  --u-space-4:  16px;
  --u-space-5:  20px;
  --u-space-6:  24px;
  --u-space-7:  28px;
  --u-space-8:  32px;
  --u-space-10: 40px;
  --u-space-12: 48px;
  --u-space-16: 64px;


  /* ============================================================
     RADIUS PRIMITIVES
     One unified scale; semantic tokens pick the world-appropriate
     step (manager uses sm/md, citizen uses lg/xl/2xl, etc.).
     ============================================================ */

  --u-radius-xs:   6px;
  --u-radius-sm:   8px;
  --u-radius-md:   10px;
  --u-radius-lg:   14px;
  --u-radius-xl:   18px;
  --u-radius-2xl:  22px;
  --u-radius-3xl:  28px;
  --u-radius-pill: 999px;


  /* ============================================================
     SHADOW PRIMITIVES
     Very low elevation; the system reads through hierarchy, not lift.
     ============================================================ */

  --u-shadow-xs:  0 1px 1px rgba(15, 23, 42, 0.04);
  --u-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
  --u-shadow-md:  0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --u-shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.10);
  --u-shadow-pop: 0 16px 48px rgba(15, 23, 42, 0.16);


  /* ============================================================
     TYPOGRAPHY PRIMITIVES
     ============================================================ */

  --u-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --u-font-sans:    "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --u-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Line heights */
  --u-leading-tight:   1.15;
  --u-leading-snug:    1.3;
  --u-leading-normal:  1.5;
  --u-leading-relaxed: 1.65;

  /* Letter spacing */
  --u-tracking-tight: -0.02em;
  --u-tracking-snug:  -0.01em;
  --u-tracking-wide:   0.04em;


  /* ============================================================
     MOTION PRIMITIVES
     ============================================================ */

  --u-ease-out:   cubic-bezier(.2, .8, .2, 1);
  --u-ease-inout: cubic-bezier(.4, 0, .2, 1);
  --u-dur-fast:   120ms;
  --u-dur-base:   180ms;
  --u-dur-slow:   240ms;


  /* ============================================================
     Z-INDEX SCALE
     Named stacking layers. Components reference these names
     instead of bare numbers so layering is predictable across
     downstream consumers.
     ============================================================ */

  --u-z-base:     0;       /* normal flow */
  --u-z-sticky:   10;      /* sticky table headers, sticky toolbar */
  --u-z-fixed:    20;      /* fixed top bar, citizen tab bar */
  --u-z-dropdown: 50;      /* select dropdowns, menu dropdowns */
  --u-z-popover:  60;      /* filter popovers, column chooser */
  --u-z-drawer:   70;      /* side drawer */
  --u-z-modal:    80;      /* modal dialog (over drawers) */
  --u-z-toast:    90;      /* toast / notification (over modals) */
  --u-z-tooltip:  100;     /* tooltips — always on top, even over toasts */


  /* ============================================================
     BORDER WIDTH SCALE
     Hairlines used by atoms. Three named widths.
     ============================================================ */

  --u-border-w-hairline: 1px;   /* default — surface borders, dividers */
  --u-border-w-thin:     1.5px; /* checkbox box, focused control */
  --u-border-w-thick:    2px;   /* timeline-step indicator, callout */


  /* ============================================================
     BREAKPOINTS
     Documentation-only — CSS media queries cannot use var().
     These tokens declare the canonical breakpoints; downstream
     consumers (Tailwind preset, JS code) read them to stay in sync.
     ============================================================ */

  --u-bp-sm:  640px;       /* large phones / phablets */
  --u-bp-md:  768px;       /* tablets */
  --u-bp-lg:  1024px;      /* laptops */
  --u-bp-xl:  1280px;      /* manager wide-screen target */
  --u-bp-2xl: 1536px;      /* extra-wide manager / dashboard */
}