/* ==========================================================================
   PIXELFLOW — design tokens
   A restrained, corporate SaaS system on a graphite (ink) palette with a
   warm amber accent, Spring Fern for positive states, warm-neutral surfaces,
   and a status palette that carries the app's meaning.
   ========================================================================== */

:root {
    /* Brand accent — graphite ink. */
    --pf-accent:        #334155;  /* slate 700 — white text ✓ */
    --pf-accent-strong: #1e293b;  /* slate 800 — hovers */
    --pf-accent-soft:   #e2e8f0;  /* slate 200 — soft fills */
    --pf-accent-ring:   rgba(51, 65, 85, 0.35);
    --pf-accent-light:  #64748b;  /* slate 500 — logo mark / muted */

    /* Secondary brand colours. */
    --pf-amber:         #fbbf24;  /* warm accent — reads on dark */
    --pf-fern:          #7fb77e;  /* Spring Fern — positive */
    --pf-icy:           #e6f2f8;  /* Icy Dawn — soft surface */

    /* Neutrals — very slightly warm so the UI reads calm, not clinical. */
    --pf-bg:            #f6f6f8;
    --pf-surface:       #ffffff;
    --pf-surface-2:     #fbfbfc;
    --pf-border:        #e6e6eb;
    --pf-border-strong: #d6d6de;

    --pf-text:          #1b1c22;
    --pf-text-muted:    #6b6d78;
    --pf-text-faint:    #9a9ca6;

    /* Status palette (training lifecycle). */
    --pf-draft:         #8a8d99;
    --pf-scheduled:     #2563eb;  /* blue — distinct from graphite */
    --pf-confirmed:     #4e9a60;  /* Spring Fern family, legible */
    --pf-progress:      #c07a12;
    --pf-completed:     #4a5568;
    --pf-cancelled:     #d0453b;

    /* Typography — refined system stack; tabular figures for data. */
    --pf-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --pf-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

    --pf-fs-xs:  0.75rem;
    --pf-fs-sm:  0.8125rem;
    --pf-fs-md:  0.875rem;
    --pf-fs-lg:  1rem;
    --pf-fs-xl:  1.25rem;
    --pf-fs-2xl: 1.75rem;
    --pf-fs-kpi: 2rem;

    /* Spacing — 4px base scale. */
    --pf-1: 4px;  --pf-2: 8px;  --pf-3: 12px; --pf-4: 16px;
    --pf-5: 20px; --pf-6: 24px; --pf-8: 32px; --pf-10: 40px; --pf-12: 48px;

    /* Radius. */
    --pf-r-sm: 6px;  --pf-r-md: 9px;  --pf-r-lg: 14px;  --pf-r-pill: 999px;

    /* Shadows — soft, low-contrast; SaaS restraint. */
    --pf-shadow-sm: 0 1px 2px rgba(17, 18, 24, 0.05);
    --pf-shadow-md: 0 4px 14px rgba(17, 18, 24, 0.07);

    /* Chrome dimensions. */
    --pf-sidebar-w: 244px;
    --pf-topbar-h:  60px;

    --pf-transition: 150ms ease;
}