/*
 * Foliocontrol Design System v1 — Tokens
 * Scope: apply the fc-ds class to a dedicated container.
 * Status: Candidate
 */

.fc-ds {
    /* Primitive colors: brand blue */
    --fc-color-blue-50: #eff6ff;
    --fc-color-blue-100: #dbeafe;
    --fc-color-blue-200: #bfdbfe;
    --fc-color-blue-400: #60a5fa;
    --fc-color-blue-500: #3b82f6;
    --fc-color-blue-600: #2563eb;
    --fc-color-blue-700: #1d4ed8;
    --fc-color-blue-800: #1e40af;
    --fc-color-blue-900: #1e3a8a;

    /* Primitive colors: neutrals */
    --fc-color-neutral-0: #ffffff;
    --fc-color-neutral-50: #f8fafc;
    --fc-color-neutral-100: #f1f5f9;
    --fc-color-neutral-200: #e2e8f0;
    --fc-color-neutral-300: #cbd5e1;
    --fc-color-neutral-400: #94a3b8;
    --fc-color-neutral-500: #64748b;
    --fc-color-neutral-600: #475569;
    --fc-color-neutral-700: #334155;
    --fc-color-neutral-800: #1e293b;
    --fc-color-neutral-900: #0f172a;

    /* Primitive colors: success */
    --fc-color-green-50: #f3faf6;
    --fc-color-green-100: #e2f3e8;
    --fc-color-green-200: #bfe2cb;
    --fc-color-green-600: #2f855a;
    --fc-color-green-700: #276749;
    --fc-color-green-800: #22543d;

    /* Primitive colors: warning */
    --fc-color-amber-50: #fffaf0;
    --fc-color-amber-100: #fdf0d5;
    --fc-color-amber-200: #f3dfb3;
    --fc-color-amber-500: #f59e0b;
    --fc-color-amber-600: #d97706;
    --fc-color-amber-800: #92400e;

    /* Primitive colors: danger */
    --fc-color-red-50: #fff7f6;
    --fc-color-red-100: #fdebea;
    --fc-color-red-200: #f5cfcc;
    --fc-color-red-500: #d95c59;
    --fc-color-red-600: #c2413b;
    --fc-color-red-700: #a33632;
    --fc-color-red-800: #842d2a;

    /* Primitive colors: information */
    --fc-color-cyan-50: #f2fafb;
    --fc-color-cyan-100: #e4f3f5;
    --fc-color-cyan-200: #c9e4e8;
    --fc-color-cyan-500: #06b6d4;
    --fc-color-cyan-700: #0e7490;
    --fc-color-cyan-800: #155e75;

    /* Semantic colors */
    --fc-color-brand: var(--fc-color-blue-700);
    --fc-color-brand-subtle: var(--fc-color-blue-50);
    --fc-color-brand-muted: var(--fc-color-blue-100);
    --fc-color-brand-strong: var(--fc-color-blue-800);
    --fc-color-brand-contrast: var(--fc-color-neutral-0);

    --fc-color-action-primary: var(--fc-color-blue-700);
    --fc-color-action-primary-hover: var(--fc-color-blue-800);
    --fc-color-action-primary-active: var(--fc-color-blue-900);
    --fc-color-action-primary-disabled: var(--fc-color-blue-200);
    --fc-color-action-primary-text: var(--fc-color-neutral-0);

    --fc-color-action-secondary: var(--fc-color-neutral-0);
    --fc-color-action-secondary-hover: var(--fc-color-neutral-50);
    --fc-color-action-secondary-active: var(--fc-color-neutral-100);
    --fc-color-action-secondary-border: var(--fc-color-neutral-300);
    --fc-color-action-secondary-text: var(--fc-color-neutral-800);

    --fc-color-success: var(--fc-color-green-600);
    --fc-color-success-subtle: var(--fc-color-green-50);
    --fc-color-success-border: var(--fc-color-green-200);
    --fc-color-success-text: var(--fc-color-green-800);
    --fc-color-success-contrast: var(--fc-color-neutral-0);

    --fc-color-warning: var(--fc-color-amber-600);
    --fc-color-warning-subtle: var(--fc-color-amber-50);
    --fc-color-warning-border: var(--fc-color-amber-200);
    --fc-color-warning-text: var(--fc-color-amber-800);
    --fc-color-warning-contrast: var(--fc-color-neutral-900);

    --fc-color-danger: var(--fc-color-red-600);
    --fc-color-danger-hover: var(--fc-color-red-700);
    --fc-color-danger-subtle: var(--fc-color-red-50);
    --fc-color-danger-border: var(--fc-color-red-200);
    --fc-color-danger-text: var(--fc-color-red-800);
    --fc-color-danger-contrast: var(--fc-color-neutral-0);

    --fc-color-info: var(--fc-color-cyan-700);
    --fc-color-info-subtle: var(--fc-color-cyan-50);
    --fc-color-info-border: var(--fc-color-cyan-200);
    --fc-color-info-text: var(--fc-color-cyan-800);
    --fc-color-info-contrast: var(--fc-color-neutral-0);
    --fc-color-locked-subtle: var(--fc-color-neutral-100);
    --fc-color-locked-border: var(--fc-color-neutral-300);
    --fc-color-locked-text: var(--fc-color-neutral-700);
    --fc-color-locked-strong: var(--fc-color-neutral-700);

    --fc-color-premium-subtle: var(--fc-color-blue-50);
    --fc-color-premium-border: var(--fc-color-blue-200);
    --fc-color-premium-text: var(--fc-color-blue-800);
    --fc-color-premium-strong: var(--fc-color-blue-800);


    --fc-color-canvas: var(--fc-color-neutral-50);
    --fc-color-surface: var(--fc-color-neutral-0);
    --fc-color-surface-subtle: var(--fc-color-neutral-50);
    --fc-color-surface-muted: var(--fc-color-neutral-100);
    --fc-color-surface-raised: var(--fc-color-neutral-0);
    --fc-color-surface-disabled: var(--fc-color-neutral-100);
    --fc-color-surface-inverse: var(--fc-color-neutral-900);
    --fc-color-overlay: rgba(15, 23, 42, 0.48);

    --fc-color-text: var(--fc-color-neutral-800);
    --fc-color-text-strong: var(--fc-color-neutral-900);
    --fc-color-text-muted: var(--fc-color-neutral-500);
    --fc-color-text-subtle: var(--fc-color-neutral-400);
    --fc-color-text-disabled: var(--fc-color-neutral-400);
    --fc-color-text-inverse: var(--fc-color-neutral-0);
    --fc-color-text-link: var(--fc-color-blue-700);
    --fc-color-text-link-hover: var(--fc-color-blue-800);

    --fc-color-border: var(--fc-color-neutral-200);
    --fc-color-border-subtle: var(--fc-color-neutral-100);
    --fc-color-border-strong: var(--fc-color-neutral-300);
    --fc-color-border-interactive: var(--fc-color-neutral-300);
    --fc-color-border-hover: var(--fc-color-blue-400);
    --fc-color-border-focus: var(--fc-color-blue-600);
    --fc-color-focus: var(--fc-color-blue-600);

    /* Financial semantics */
    --fc-color-financial-positive: var(--fc-color-green-700);
    --fc-color-financial-positive-subtle: var(--fc-color-green-50);
    --fc-color-financial-negative: var(--fc-color-red-700);
    --fc-color-financial-negative-subtle: var(--fc-color-red-50);
    --fc-color-financial-neutral: var(--fc-color-neutral-600);
    --fc-color-financial-neutral-subtle: var(--fc-color-neutral-100);

    /* Categorical colors: independent from semantic statuses */
    --fc-color-data-1: #2563eb;
    --fc-color-data-2: #06b6d4;
    --fc-color-data-3: #8b5cf6;
    --fc-color-data-4: #f59e0b;
    --fc-color-data-5: #14b8a6;
    --fc-color-data-6: #3b82f6;
    --fc-color-data-7: #818cf8;
    --fc-color-data-8: #2dd4bf;
    --fc-color-chart-grid: var(--fc-color-neutral-200);
    --fc-color-chart-axis: var(--fc-color-neutral-400);
    --fc-color-chart-label: var(--fc-color-text-muted);
    --fc-color-chart-tooltip: var(--fc-color-neutral-900);
    --fc-color-chart-remainder: var(--fc-color-neutral-100);

    /* Typography */
    --fc-font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --fc-font-size-xs: 0.75rem;
    --fc-font-size-sm: 0.875rem;
    --fc-font-size-md: 1rem;
    --fc-font-size-lg: 1.125rem;
    --fc-font-size-xl: 1.25rem;
    --fc-font-size-2xl: 1.5rem;
    --fc-font-size-3xl: 1.875rem;
    --fc-font-size-4xl: 2.25rem;
    --fc-font-size-display: 3rem;

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

    --fc-line-height-tight: 1.15;
    --fc-line-height-snug: 1.3;
    --fc-line-height-normal: 1.5;
    --fc-line-height-relaxed: 1.65;
    --fc-line-height-loose: 1.8;

    --fc-letter-spacing-tight: -0.025em;
    --fc-letter-spacing-normal: 0;
    --fc-letter-spacing-wide: 0.04em;
    --fc-letter-spacing-wider: 0.08em;

    --fc-font-size-page-title: var(--fc-font-size-3xl);
    --fc-font-size-section-title: var(--fc-font-size-2xl);
    --fc-font-size-card-title: var(--fc-font-size-lg);
    --fc-font-size-body: var(--fc-font-size-md);
    --fc-font-size-body-small: var(--fc-font-size-sm);
    --fc-font-size-label: var(--fc-font-size-sm);
    --fc-font-size-caption: var(--fc-font-size-xs);
    --fc-font-size-financial-value: var(--fc-font-size-2xl);

    /* Spacing: 4px base */
    --fc-space-0: 0;
    --fc-space-1: 0.25rem;
    --fc-space-2: 0.5rem;
    --fc-space-3: 0.75rem;
    --fc-space-4: 1rem;
    --fc-space-5: 1.25rem;
    --fc-space-6: 1.5rem;
    --fc-space-8: 2rem;
    --fc-space-10: 2.5rem;
    --fc-space-12: 3rem;
    --fc-space-16: 4rem;

    --fc-space-page-inline: var(--fc-space-6);
    --fc-space-page-block: var(--fc-space-10);
    --fc-space-section: var(--fc-space-10);
    --fc-space-card: var(--fc-space-6);
    --fc-space-field: var(--fc-space-4);
    --fc-space-control-gap: var(--fc-space-2);

    /* Shape and elevation */
    --fc-radius-none: 0;
    --fc-radius-xs: 0.25rem;
    --fc-radius-sm: 0.5rem;
    --fc-radius-md: 0.75rem;
    --fc-radius-lg: 1rem;
    --fc-radius-xl: 1.375rem;
    --fc-radius-full: 999px;

    --fc-radius-card: 1.125rem;
    --fc-border-width-1: 1px;
    --fc-border-width-2: 2px;

    --fc-shadow-none: none;
    --fc-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --fc-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --fc-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
    --fc-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

    /* Motion */
    --fc-duration-instant: 0ms;
    --fc-duration-fast: 120ms;
    --fc-duration-normal: 180ms;
    --fc-duration-slow: 240ms;
    --fc-duration-emphasized: 360ms;
    --fc-easing-linear: linear;
    --fc-easing-standard: ease;
    --fc-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --fc-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --fc-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);

    /* Layers */
    --fc-z-base: 0;
    --fc-z-raised: 10;
    --fc-z-sticky: 20;
    --fc-z-dropdown: 30;
    --fc-z-overlay: 40;
    --fc-z-modal: 50;
    --fc-z-tooltip: 60;

    /* Sizing */
    --fc-icon-size-xs: 0.75rem;
    --fc-icon-size-sm: 1rem;
    --fc-icon-size-md: 1.25rem;
    --fc-icon-size-lg: 1.5rem;
    --fc-icon-size-xl: 2rem;
    --fc-icon-stroke: 2;

    --fc-control-height-sm: 2.125rem;
    --fc-control-height-md: 2.5rem;
    --fc-control-height-lg: 2.875rem;
    --fc-touch-target-min: 2.75rem;

    --fc-container-sm: 40rem;
    --fc-container-md: 47.5rem;
    --fc-container-lg: 61.25rem;
    --fc-container-xl: 73.75rem;
    --fc-container-app: 87.5rem;
    --fc-content-measure: 45rem;

    /* Focus ring */
    --fc-focus-ring-width: 3px;
    --fc-focus-ring-offset: 2px;
    --fc-focus-ring-color: rgba(37, 99, 235, 0.28);
    --fc-focus-ring: 0 0 0 var(--fc-focus-ring-width) var(--fc-focus-ring-color);
}