/* =================================================================
   ProvincialSuite Design System — Brand Token Layer
   -----------------------------------------------------------------
   Single source of truth for the redesign (Hybrid: Radzen base +
   custom brand layer). DESIGN/UI ONLY — no behavioral logic here.

   Naming: --ps-*  = raw brand primitives (palette, type, space...)
           --theme-* (defined in MainLayout/themeInit) = live, template
           -aware tokens that the app consumes. Phase 0 repoints the
           default --theme-* values at these --ps-* primitives so the
           new identity cascades app-wide without touching behavior.
   ================================================================= */

:root {
    /* ---------------------------------------------------------------
       TYPOGRAPHY
       --------------------------------------------------------------- */
    --ps-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    --ps-font-display: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ps-font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, 'Liberation Mono', monospace;

    /* Type scale (fluid-friendly, rem based) */
    --ps-text-xs: 0.75rem;     /* 12 */
    --ps-text-sm: 0.875rem;    /* 14 */
    --ps-text-base: 1rem;      /* 16 */
    --ps-text-lg: 1.125rem;    /* 18 */
    --ps-text-xl: 1.25rem;     /* 20 */
    --ps-text-2xl: 1.5rem;     /* 24 */
    --ps-text-3xl: 1.875rem;   /* 30 */
    --ps-text-4xl: 2.25rem;    /* 36 */
    --ps-text-5xl: 3rem;       /* 48 */

    --ps-leading-tight: 1.2;
    --ps-leading-snug: 1.4;
    --ps-leading-normal: 1.6;
    --ps-tracking-tight: -0.02em;
    --ps-tracking-snug: -0.01em;

    --ps-weight-regular: 400;
    --ps-weight-medium: 500;
    --ps-weight-semibold: 600;
    --ps-weight-bold: 700;
    --ps-weight-extrabold: 800;

    /* ---------------------------------------------------------------
       COLOR — Neutral ramp (Slate). Does most of the heavy lifting.
       --------------------------------------------------------------- */
    --ps-neutral-0:   #ffffff;
    --ps-neutral-50:  #f8fafc;
    --ps-neutral-100: #f1f5f9;
    --ps-neutral-200: #e2e8f0;
    --ps-neutral-300: #cbd5e1;
    --ps-neutral-400: #94a3b8;
    --ps-neutral-500: #64748b;
    --ps-neutral-600: #475569;
    --ps-neutral-700: #334155;
    --ps-neutral-800: #1e293b;
    --ps-neutral-900: #0f172a;

    /* COLOR — Primary (refined, restrained blue) */
    --ps-primary-50:  #eff6ff;
    --ps-primary-100: #dbeafe;
    --ps-primary-200: #bfdbfe;
    --ps-primary-300: #93c5fd;
    --ps-primary-400: #60a5fa;
    --ps-primary-500: #3b82f6;
    --ps-primary-600: #2563eb;   /* brand primary */
    --ps-primary-700: #1d4ed8;
    --ps-primary-800: #1e40af;
    --ps-primary-900: #1e3a8a;   /* deep navy for depth */

    /* COLOR — Accent (warm amber, reserved for emphasis/CTA) */
    --ps-accent-50:  #fffbeb;
    --ps-accent-100: #fef3c7;
    --ps-accent-400: #fbbf24;
    --ps-accent-500: #f59e0b;    /* brand accent */
    --ps-accent-600: #d97706;

    /* COLOR — Semantic */
    --ps-success:    #16a34a;
    --ps-success-bg: #f0fdf4;
    --ps-warning:    #d97706;
    --ps-warning-bg: #fffbeb;
    --ps-danger:     #dc2626;
    --ps-danger-bg:  #fef2f2;
    --ps-info:       #0ea5e9;
    --ps-info-bg:    #f0f9ff;
    /* Darker "on-tint" text shades — WCAG AA (>=4.5:1) for small text on the *-bg tints */
    --ps-success-700: #15803d;
    --ps-warning-700: #b45309;
    --ps-danger-700:  #b91c1c;
    --ps-info-700:    #0369a1;

    /* Semantic surface/text aliases (light mode) */
    --ps-bg:           var(--ps-neutral-50);
    --ps-surface:      var(--ps-neutral-0);
    --ps-surface-alt:  var(--ps-neutral-100);
    --ps-border:       var(--ps-neutral-200);
    --ps-border-strong:var(--ps-neutral-300);
    --ps-text:         var(--ps-neutral-900);
    --ps-text-muted:   var(--ps-neutral-500);
    --ps-text-subtle:  var(--ps-neutral-400);

    /* ---------------------------------------------------------------
       ELEVATION — soft, layered shadows (cooler, modern)
       --------------------------------------------------------------- */
    --ps-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ps-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ps-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --ps-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --ps-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
    --ps-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

    /* ---------------------------------------------------------------
       RADIUS
       --------------------------------------------------------------- */
    --ps-radius-sm: 6px;
    --ps-radius-md: 10px;
    --ps-radius-lg: 14px;
    --ps-radius-xl: 20px;
    --ps-radius-2xl: 28px;
    --ps-radius-full: 9999px;

    /* ---------------------------------------------------------------
       SPACING (4px base)
       --------------------------------------------------------------- */
    --ps-space-1: 0.25rem;
    --ps-space-2: 0.5rem;
    --ps-space-3: 0.75rem;
    --ps-space-4: 1rem;
    --ps-space-5: 1.25rem;
    --ps-space-6: 1.5rem;
    --ps-space-8: 2rem;
    --ps-space-10: 2.5rem;
    --ps-space-12: 3rem;
    --ps-space-16: 4rem;

    /* Minimum touch target for phone browsers (Apple/Google HIG) */
    --ps-tap-min: 44px;

    /* Safe-area insets (notch / home indicator) — 0 on devices without them */
    --ps-safe-top: env(safe-area-inset-top, 0px);
    --ps-safe-right: env(safe-area-inset-right, 0px);
    --ps-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ps-safe-left: env(safe-area-inset-left, 0px);

    /* ---------------------------------------------------------------
       MOTION
       --------------------------------------------------------------- */
    --ps-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ps-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ps-duration-fast: 0.15s;
    --ps-duration: 0.25s;
    --ps-duration-slow: 0.4s;

    /* Gradients (subtle, single-hue — replaces tri-color rainbow) */
    --ps-gradient-primary: linear-gradient(135deg, var(--ps-primary-600) 0%, var(--ps-primary-800) 100%);
    --ps-gradient-surface: linear-gradient(180deg, var(--ps-neutral-0) 0%, var(--ps-neutral-50) 100%);
}

/* =================================================================
   BASE TYPOGRAPHY — applies the brand typefaces globally.
   Sizes are intentionally NOT forced here so existing component
   layouts are preserved (UI-only, no layout breakage).
   ================================================================= */
body {
    font-family: var(--ps-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: var(--ps-tracking-snug);
}

h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-family: var(--ps-font-display);
    font-weight: var(--ps-weight-bold);
    letter-spacing: var(--ps-tracking-tight);
    line-height: var(--ps-leading-tight);
}

::selection {
    background: var(--ps-primary-200);
    color: var(--ps-primary-900);
}

/* Accessible focus ring (keyboard nav) */
:focus-visible {
    outline: 2px solid var(--ps-primary-600);
    outline-offset: 2px;
    border-radius: var(--ps-radius-sm);
}

/* Refined, unobtrusive scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ps-neutral-300) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--ps-neutral-300);
    border-radius: var(--ps-radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ps-neutral-400); background-clip: content-box; }