/* ════════════════════════════════════════════════════════════════════
   PF DESIGN SYSTEM — Primitive Tokens
   ────────────────────────────────────────────────────────────────────
   Tier 1 of 3. Raw, immutable design values. NEVER consume these
   directly in component CSS — always go through the Semantic tier
   (tokens.semantic.css). This separation is what makes themes work.

   Includes:
     • Color palettes (slate, indigo, red, amber, emerald, sky)
     • Spacing scale (8-point grid, t-shirt sized)
     • Radius scale
     • Shadow scale
     • Typography scale (font-family, size, weight, line-height)
     • Motion (duration, easing)
     • Z-index scale

   Conventions:
     • Color steps use 50-950 scale (Tailwind v4 / Radix Colors)
     • Spacing uses --pf-space-{N} where N indicates rem multiplier
       at 0.25rem increments (4 = 1rem, 8 = 2rem)
     • All values are static — themes ONLY override Semantic tier

   Version: 1.0.0
   Last revised: 2026-05-09
   ──────────────────────────────────────────────────────────────────── */

:root {
    /* ─────────────────────────────────────────────────────────────
       COLOR — Slate (neutral chrome: surface, text, border)
       Uses CIELAB-tuned grays for perceptually uniform contrast steps.
       ───────────────────────────────────────────────────────────── */
    --pf-color-slate-50:   #f8fafc;
    --pf-color-slate-100:  #f1f5f9;
    --pf-color-slate-200:  #e2e8f0;
    --pf-color-slate-300:  #cbd5e1;
    --pf-color-slate-400:  #94a3b8;
    --pf-color-slate-500:  #64748b;
    --pf-color-slate-600:  #475569;
    --pf-color-slate-700:  #334155;
    --pf-color-slate-800:  #1e293b;
    --pf-color-slate-900:  #0f172a;
    --pf-color-slate-950:  #020617;

    /* ─────────────────────────────────────────────────────────────
       COLOR — Indigo (action, focus, brand-accent)
       ───────────────────────────────────────────────────────────── */
    --pf-color-indigo-50:  #eef2ff;
    --pf-color-indigo-100: #e0e7ff;
    --pf-color-indigo-200: #c7d2fe;
    --pf-color-indigo-300: #a5b4fc;
    --pf-color-indigo-400: #818cf8;
    --pf-color-indigo-500: #6366f1;
    --pf-color-indigo-600: #4f46e5;
    --pf-color-indigo-700: #4338ca;
    --pf-color-indigo-800: #3730a3;
    --pf-color-indigo-900: #312e81;
    --pf-color-indigo-950: #1e1b4b;

    /* ─────────────────────────────────────────────────────────────
       COLOR — Platforma brand red (primary action across platform)
       ─────────────────────────────────────────────────────────────
       HF 2026-05-11. Separate scale from --pf-color-red-* (danger) so
       primary CTAs and destructive actions never collide. Mapped from
       brand spec D4213D + the existing tenant-primary palette used by
       Nordic Ruby theme; derived darker/lighter shades via 12-24% mix.
       Used by --pf-color-action-primary in tokens.semantic.css. */
    --pf-color-platforma-50:   #fdf1f3;
    --pf-color-platforma-100:  #fbdcdf;
    --pf-color-platforma-200:  #f6b3bb;
    --pf-color-platforma-300:  #ee8895;
    --pf-color-platforma-400:  #e15869;
    --pf-color-platforma-500:  #d4213d;
    --pf-color-platforma-600:  #b91c36;
    --pf-color-platforma-700:  #9f1730;
    --pf-color-platforma-800:  #7a1124;
    --pf-color-platforma-900:  #5c0b1b;
    --pf-color-platforma-950:  #2c0610;

    /* ─────────────────────────────────────────────────────────────
       COLOR — Red (status: danger, destructive)
       ───────────────────────────────────────────────────────────── */
    --pf-color-red-50:     #fef2f2;
    --pf-color-red-100:    #fee2e2;
    --pf-color-red-200:    #fecaca;
    --pf-color-red-300:    #fca5a5;
    --pf-color-red-400:    #f87171;
    --pf-color-red-500:    #ef4444;
    --pf-color-red-600:    #dc2626;
    --pf-color-red-700:    #b91c1c;
    --pf-color-red-800:    #991b1b;
    --pf-color-red-900:    #7f1d1d;
    --pf-color-red-950:    #450a0a;

    /* ─────────────────────────────────────────────────────────────
       COLOR — Amber (status: warning, attention)
       ───────────────────────────────────────────────────────────── */
    --pf-color-amber-50:   #fffbeb;
    --pf-color-amber-100:  #fef3c7;
    --pf-color-amber-200:  #fde68a;
    --pf-color-amber-300:  #fcd34d;
    --pf-color-amber-400:  #fbbf24;
    --pf-color-amber-500:  #f59e0b;
    --pf-color-amber-600:  #d97706;
    --pf-color-amber-700:  #b45309;
    --pf-color-amber-800:  #92400e;
    --pf-color-amber-900:  #78350f;
    --pf-color-amber-950:  #451a03;

    /* ─────────────────────────────────────────────────────────────
       COLOR — Emerald (status: success, confirmation)
       ───────────────────────────────────────────────────────────── */
    --pf-color-emerald-50:  #ecfdf5;
    --pf-color-emerald-100: #d1fae5;
    --pf-color-emerald-200: #a7f3d0;
    --pf-color-emerald-300: #6ee7b7;
    --pf-color-emerald-400: #34d399;
    --pf-color-emerald-500: #10b981;
    --pf-color-emerald-600: #059669;
    --pf-color-emerald-700: #047857;
    --pf-color-emerald-800: #065f46;
    --pf-color-emerald-900: #064e3b;
    --pf-color-emerald-950: #022c22;

    /* ─────────────────────────────────────────────────────────────
       COLOR — Sky (status: info, neutral notification)
       ───────────────────────────────────────────────────────────── */
    --pf-color-sky-50:     #f0f9ff;
    --pf-color-sky-100:    #e0f2fe;
    --pf-color-sky-200:    #bae6fd;
    --pf-color-sky-300:    #7dd3fc;
    --pf-color-sky-400:    #38bdf8;
    --pf-color-sky-500:    #0ea5e9;
    --pf-color-sky-600:    #0284c7;
    --pf-color-sky-700:    #0369a1;
    --pf-color-sky-800:    #075985;
    --pf-color-sky-900:    #0c4a6e;
    --pf-color-sky-950:    #082f49;

    /* ─────────────────────────────────────────────────────────────
       COLOR — Pure black/white anchors
       ───────────────────────────────────────────────────────────── */
    --pf-color-white: #ffffff;
    --pf-color-black: #000000;

    /* ─────────────────────────────────────────────────────────────
       SPACING — 8-point grid (rem-based for accessibility scaling)
       ───────────────────────────────────────────────────────────── */
    --pf-space-0:    0;
    --pf-space-px:   1px;
    --pf-space-0-5:  0.125rem;   /*  2px */
    --pf-space-1:    0.25rem;    /*  4px */
    --pf-space-1-5:  0.375rem;   /*  6px */
    --pf-space-2:    0.5rem;     /*  8px */
    --pf-space-2-5:  0.625rem;   /* 10px */
    --pf-space-3:    0.75rem;    /* 12px */
    --pf-space-3-5:  0.875rem;   /* 14px */
    --pf-space-4:    1rem;       /* 16px */
    --pf-space-5:    1.25rem;    /* 20px */
    --pf-space-6:    1.5rem;     /* 24px */
    --pf-space-7:    1.75rem;    /* 28px */
    --pf-space-8:    2rem;       /* 32px */
    --pf-space-10:   2.5rem;     /* 40px */
    --pf-space-12:   3rem;       /* 48px */
    --pf-space-14:   3.5rem;     /* 56px */
    --pf-space-16:   4rem;       /* 64px */
    --pf-space-20:   5rem;       /* 80px */
    --pf-space-24:   6rem;       /* 96px */
    --pf-space-32:   8rem;       /* 128px */
    --pf-space-40:   10rem;      /* 160px */

    /* ─────────────────────────────────────────────────────────────
       RADIUS — Border-radius scale
       ───────────────────────────────────────────────────────────── */
    --pf-radius-none: 0;
    --pf-radius-xs:   0.125rem;  /*  2px — chips */
    --pf-radius-sm:   0.25rem;   /*  4px — inputs */
    --pf-radius-md:   0.375rem;  /*  6px — small cards */
    --pf-radius-lg:   0.5rem;    /*  8px — cards */
    --pf-radius-xl:   0.75rem;   /* 12px — panels */
    --pf-radius-2xl:  1rem;      /* 16px — modals */
    --pf-radius-3xl:  1.5rem;    /* 24px — hero */
    --pf-radius-full: 9999px;    /* pill / round */

    /* ─────────────────────────────────────────────────────────────
       SHADOW — Elevation scale (subtle to dramatic)
       Tuned for light backgrounds; dark theme overrides in semantic.
       ───────────────────────────────────────────────────────────── */
    --pf-shadow-none: none;
    --pf-shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
    --pf-shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
    --pf-shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
    --pf-shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
    --pf-shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
    --pf-shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
    --pf-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* ─────────────────────────────────────────────────────────────
       TYPOGRAPHY — Font families
       ───────────────────────────────────────────────────────────── */
    --pf-font-family-sans:
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --pf-font-family-serif:
        Georgia, Cambria, "Times New Roman", Times, serif;
    --pf-font-family-mono:
        ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
        "Courier New", monospace;

    /* ─────────────────────────────────────────────────────────────
       TYPOGRAPHY — Size scale (modular, ratio 1.125 minor third)
       ───────────────────────────────────────────────────────────── */
    --pf-text-size-xs:   0.75rem;   /* 12px */
    --pf-text-size-sm:   0.875rem;  /* 14px */
    --pf-text-size-base: 1rem;      /* 16px */
    --pf-text-size-lg:   1.125rem;  /* 18px */
    --pf-text-size-xl:   1.25rem;   /* 20px */
    --pf-text-size-2xl:  1.5rem;    /* 24px */
    --pf-text-size-3xl:  1.875rem;  /* 30px */
    --pf-text-size-4xl:  2.25rem;   /* 36px */
    --pf-text-size-5xl:  3rem;      /* 48px */
    --pf-text-size-6xl:  3.75rem;   /* 60px */

    /* ─────────────────────────────────────────────────────────────
       TYPOGRAPHY — Weight scale
       ───────────────────────────────────────────────────────────── */
    --pf-text-weight-thin:       100;
    --pf-text-weight-light:      300;
    --pf-text-weight-regular:    400;
    --pf-text-weight-medium:     500;
    --pf-text-weight-semibold:   600;
    --pf-text-weight-bold:       700;
    --pf-text-weight-extrabold:  800;
    --pf-text-weight-black:      900;

    /* ─────────────────────────────────────────────────────────────
       TYPOGRAPHY — Line-height scale
       ───────────────────────────────────────────────────────────── */
    --pf-text-leading-none:    1;
    --pf-text-leading-tight:   1.25;
    --pf-text-leading-snug:    1.375;
    --pf-text-leading-normal:  1.5;
    --pf-text-leading-relaxed: 1.625;
    --pf-text-leading-loose:   2;

    /* ─────────────────────────────────────────────────────────────
       TYPOGRAPHY — Letter-spacing scale
       ───────────────────────────────────────────────────────────── */
    --pf-text-tracking-tighter: -0.05em;
    --pf-text-tracking-tight:   -0.025em;
    --pf-text-tracking-normal:   0;
    --pf-text-tracking-wide:     0.025em;
    --pf-text-tracking-wider:    0.05em;
    --pf-text-tracking-widest:   0.1em;

    /* ─────────────────────────────────────────────────────────────
       MOTION — Duration scale
       ───────────────────────────────────────────────────────────── */
    --pf-motion-duration-instant: 75ms;
    --pf-motion-duration-fast:    150ms;
    --pf-motion-duration-base:    250ms;
    --pf-motion-duration-slow:    400ms;
    --pf-motion-duration-slower:  600ms;

    /* ─────────────────────────────────────────────────────────────
       MOTION — Easing curves
       ───────────────────────────────────────────────────────────── */
    --pf-motion-ease-linear:    linear;
    --pf-motion-ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --pf-motion-ease-out:       cubic-bezier(0, 0, 0.2, 1);
    --pf-motion-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --pf-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* ─────────────────────────────────────────────────────────────
       Z-INDEX — Layering scale (semantic, not numeric escalation)
       ───────────────────────────────────────────────────────────── */
    --pf-z-base:        0;
    --pf-z-raised:      10;     /* sticky elements */
    --pf-z-dropdown:    100;    /* select dropdowns, autocomplete */
    --pf-z-sticky:      200;    /* sticky headers */
    --pf-z-overlay:     500;    /* drawer backdrops */
    --pf-z-modal:      1000;    /* modals */
    --pf-z-popover:    1100;    /* popovers, tooltips */
    --pf-z-toast:      2000;    /* toast notifications */
    --pf-z-max:        2147483647; /* max signed int32 */

    /* ─────────────────────────────────────────────────────────────
       BREAKPOINTS — Reference values for media queries
       (Use in `@media (min-width: var(--pf-breakpoint-md))` if your
        build supports it; otherwise as documentation/JS reference.)
       ───────────────────────────────────────────────────────────── */
    --pf-breakpoint-sm:  640px;
    --pf-breakpoint-md:  768px;
    --pf-breakpoint-lg:  1024px;
    --pf-breakpoint-xl:  1280px;
    --pf-breakpoint-2xl: 1536px;
}