/* Frontend foundation tokens (v1) */
:root {
    /* Brand and product roles */
    --ff-brand-primary: #1b4ea8;
    --ff-brand-primary-strong: #163f8c;
    --ff-brand-primary-soft: #e7f0ff;
    --ff-brand-accent: #2e92a8;
    --ff-brand-accent-soft: #dff5fb;

    /* Surface roles */
    --ff-surface-canvas: #ebf2fb;
    --ff-surface-subtle: #f5f8fd;
    --ff-surface-raised: #ffffff;
    --ff-surface-strong: #dce6f4;
    --ff-surface-inverse: var(--color-0f172a, #0f172a);

    /* Text roles */
    --ff-text-primary: #0f2748;
    --ff-text-secondary: #2b456c;
    --ff-text-muted: #536b8b;
    --ff-text-inverse: var(--color-white, #ffffff);
    --ff-text-link: var(--ff-brand-primary);

    /* Border roles */
    --ff-border-subtle: rgba(15, 23, 42, 0.14);
    --ff-border-default: rgba(15, 23, 42, 0.2);
    --ff-border-strong: rgba(15, 23, 42, 0.28);

    /* Spacing scale */
    --ff-space-0: 0;
    --ff-space-1: 0.25rem;
    --ff-space-2: 0.5rem;
    --ff-space-3: 0.75rem;
    --ff-space-4: 1rem;
    --ff-space-5: 1.25rem;
    --ff-space-6: 1.5rem;
    --ff-space-7: 2rem;
    --ff-space-8: 2.5rem;
    --ff-space-9: 3rem;
    --ff-space-10: 3.5rem;

    /* Typography */
    --ff-font-family-base: 'Manrope', 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --ff-font-family-heading: 'Manrope', 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --ff-font-weight-regular: 400;
    --ff-font-weight-medium: 500;
    --ff-font-weight-semibold: 600;
    --ff-font-weight-bold: 700;
    --ff-font-size-xs: 0.75rem;
    --ff-font-size-sm: 0.875rem;
    --ff-font-size-md: 1rem;
    --ff-font-size-lg: 1.125rem;
    --ff-font-size-xl: 1.25rem;
    --ff-font-size-2xl: 1.5rem;
    --ff-font-size-3xl: 1.75rem;
    --ff-line-height-tight: 1.2;
    --ff-line-height-snug: 1.35;
    --ff-line-height-base: 1.5;
    --ff-line-height-relaxed: 1.65;

    /* Radius */
    --ff-radius-sm: 0.4rem;
    --ff-radius-md: 0.75rem;
    --ff-radius-lg: 1rem;
    --ff-radius-xl: 1.25rem;
    --ff-radius-pill: 999px;

    /* Shadows */
    --ff-shadow-sm: 0 10px 22px rgba(16, 45, 96, 0.08);
    --ff-shadow-md: 0 18px 42px rgba(16, 45, 96, 0.14);
    --ff-shadow-lg: 0 28px 64px rgba(16, 45, 96, 0.2);

    /* Grid and layout density */
    --ff-grid-max-width: 1940px;
    --ff-content-max-width: 1800px;
    --ff-shell-gutter-x: clamp(0.45rem, 0.7vw + 0.25rem, 1rem);
    --ff-shell-gutter-y: 1rem;
    --ff-density-compact-row: 2.5rem;
    --ff-density-comfort-row: 2.875rem;
    --ff-density-spacious-row: 3.25rem;
    --ff-density-default: var(--ff-density-comfort-row);

    /* Z-index scale */
    --ff-z-base: 1;
    --ff-z-sticky: 100;
    --ff-z-dropdown: 1000;
    --ff-z-fixed: 1030;
    --ff-z-modal: 1055;
    --ff-z-toast: 1080;

    /* Component sizing */
    --ff-control-height-sm: 2rem;
    --ff-control-height-md: 2.5rem;
    --ff-control-height-lg: 2.875rem;
    --ff-table-row-min-height: var(--ff-density-default);

    /* Shell primitives */
    --ff-sidebar-width: clamp(206px, 13.2vw, 228px);
    --ff-sidebar-bg: linear-gradient(180deg, #0a1b44 0%, #123062 100%);
    --ff-sidebar-text: rgba(240, 245, 255, 0.9);
    --ff-sidebar-border: rgba(255, 255, 255, 0.14);
    --ff-sidebar-shadow: 0 20px 32px rgba(8, 19, 45, 0.24);
    --ff-topbar-height: 4.25rem;
    --ff-topbar-bg: linear-gradient(120deg, rgba(14, 41, 91, 0.95), rgba(21, 56, 115, 0.92));
    --ff-topbar-border: var(--ff-border-subtle);
    --ff-page-header-gap: var(--ff-space-4);
    --ff-page-header-title-size: var(--ff-font-size-2xl);
    --ff-page-header-subtitle-size: var(--ff-font-size-sm);

    /* Breakpoints (documentation and calc support) */
    --ff-bp-xs: 0;
    --ff-bp-sm: 576px;
    --ff-bp-md: 768px;
    --ff-bp-lg: 992px;
    --ff-bp-xl: 1200px;
    --ff-bp-2xl: 1400px;

    /* Status semantics */
    --ff-status-info-bg: rgba(13, 110, 253, 0.2);
    --ff-status-info-fg: #173f8f;
    --ff-status-success-bg: rgba(25, 135, 84, 0.2);
    --ff-status-success-surface: #e7f6ee;
    --ff-status-success-fg: var(--color-166534);
    --ff-status-warning-bg: rgba(255, 193, 7, 0.26);
    --ff-status-warning-surface: #fff5dd;
    --ff-status-warning-fg: var(--color-92400e);
    --ff-status-danger-bg: rgba(220, 53, 69, 0.2);
    --ff-status-danger-fg: var(--color-991b1b);
    --ff-status-neutral-bg: rgba(108, 117, 125, 0.2);
    --ff-status-neutral-fg: #2f3e54;

    /* Chart baseline roles */
    --ff-chart-01: #2563eb;
    --ff-chart-02: #0f766e;
    --ff-chart-03: #0369a1;
    --ff-chart-04: #4f46e5;
    --ff-chart-05: #475569;
    --ff-chart-grid: rgba(15, 23, 42, 0.08);
    --ff-chart-axis: rgba(15, 23, 42, 0.55);

    /* Focus and interaction states */
    --ff-focus-ring: 0 0 0 0.2rem rgba(35, 95, 206, 0.34);
    --ff-hover-overlay: var(--alpha-0f172a-06);
    --ff-active-overlay: var(--alpha-0f172a-10);
}