// Design Tokens as CSS Variables
// Based on Secretaría de Finanzas brand guidelines
// These are set dynamically by ThemeLoader, but defined here for reference
// and IDE autocomplete support

:root {
  // Colors - Secretaría de Finanzas brand colors
  // Will be set by ThemeLoader, but defaults shown here
  --sefin-color-primary: #55C3D8; // Light Blue from brand
  --sefin-color-primary-dark: #3f9bb0;
  --sefin-color-primary-light: #80d3e5;
  --sefin-color-secondary: #383838; // Dark Gray from brand
  --sefin-color-secondary-dark: #2a2a2a;
  --sefin-color-secondary-light: #686868;
  --sefin-color-background: #ffffff; // White from brand
  --sefin-color-background-elevated: #ffffff;
  --sefin-color-surface: #ffffff;
  --sefin-color-surface-hover: #cecece; // Light Gray from brand
  --sefin-color-surface-hover-subtle: #f5f5f5; // Subtle hover for inputs/buttons
  --sefin-color-surface-option-hover: #e6f7fb; // Primary tint for dropdown option hover (brand alignment)
  --sefin-color-text: #383838; // Dark Gray from brand
  --sefin-color-text-secondary: #686868;
  --sefin-color-text-disabled: #7d7d7d; // Soft gray for disabled state, readable but subtle
  --sefin-color-text-disabled-strong: #5c5c5c; // Darker gray for disabled inputs (better contrast on gray background)
  --sefin-color-placeholder: #b5b5b5; // Soft gray for input placeholders (inputs, select, textarea, autocomplete, formfield)
  --sefin-color-placeholder-disabled: #6b6b6b; // Darker placeholder when field is disabled (readable on gray bg)
  --sefin-color-border: #cecece; // Light Gray from brand
  --sefin-color-border-focus: #55C3D8; // Light Blue from brand
  --sefin-color-success: #4caf50;
  --sefin-color-warning: #ff9800;
  --sefin-color-error: #f44336;
  --sefin-color-info: #009688;

  // Brand-specific colors
  --sefin-color-brand-dark-gray: #383838;
  --sefin-color-brand-light-gray: #cecece;
  --sefin-color-brand-light-blue: #55C3D8;
  --sefin-color-brand-white: #ffffff;

  // Spacing
  --sefin-spacing-xs: 4px;
  --sefin-spacing-sm: 8px;
  --sefin-spacing-md: 16px;
  --sefin-spacing-lg: 24px;
  --sefin-spacing-xl: 32px;
  --sefin-spacing-2xl: 48px;
  --sefin-spacing-3xl: 64px;
  --sefin-spacing-4xl: 96px;
  --sefin-spacing-5xl: 128px;

  // Typography - Pluto typeface from brand guidelines
  --sefin-font-family-base: 'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sefin-font-family-mono: 'Fira Code', 'Courier New', monospace;
  --sefin-font-size-xs: 0.75rem;
  --sefin-font-size-sm: 0.875rem;
  --sefin-font-size-base: 1rem;
  --sefin-font-size-lg: 1.125rem;
  --sefin-font-size-xl: 1.25rem;
  --sefin-font-size-2xl: 1.5rem;
  --sefin-font-size-3xl: 1.875rem;
  --sefin-font-size-4xl: 2.25rem;
  --sefin-font-size-5xl: 3rem;
  --sefin-font-weight-light: 300; // Pluto-Light
  --sefin-font-weight-normal: 400; // Pluto-Regular
  --sefin-font-weight-medium: 500;
  --sefin-font-weight-semibold: 600;
  --sefin-font-weight-bold: 700; // Pluto-Bold
  --sefin-line-height-tight: 1.25;
  --sefin-line-height-normal: 1.5;
  --sefin-line-height-relaxed: 1.75;

  // Border Radius
  --sefin-radius-none: 0;
  --sefin-radius-sm: 4px;
  --sefin-radius-md: 8px;
  --sefin-radius-lg: 12px;
  --sefin-radius-xl: 16px;
  --sefin-radius-2xl: 24px;
  --sefin-radius-full: 9999px;

  // Input heights (reference: Textfield, FormField) - same scale for entire platform
  --sefin-input-height-sm: 34px;
  --sefin-input-height-md: 40px;
  --sefin-input-height-lg: 44px;

  // Component heights (Select, Autocomplete, Button, etc.) - same as input heights
  --sefin-component-height-sm: 34px;
  --sefin-component-height-md: 40px;
  --sefin-component-height-lg: 44px;

  // Chip/Tag compact heights
  --sefin-chip-height-sm: 24px;
  --sefin-chip-height-md: 32px;
  --sefin-chip-height-lg: 40px;

  // Helper text / small UI elements
  --sefin-helper-height: 20px;

  // Icon sizes
  --sefin-icon-size-xs: 12px;
  --sefin-icon-size-sm: 16px;
  --sefin-icon-size-md: 20px;
  --sefin-icon-size-lg: 24px;
  --sefin-icon-size-xl: 32px;
  --sefin-icon-size-2xl: 48px;

  // Checkbox/Radio sizes
  --sefin-control-size-sm: 16px;
  --sefin-control-size-md: 20px;
  --sefin-control-size-lg: 24px;

  // Border Radius (alias for backward compatibility)
  --sefin-border-radius-none: var(--sefin-radius-none);
  --sefin-border-radius-sm: var(--sefin-radius-sm);
  --sefin-border-radius-md: var(--sefin-radius-md);
  --sefin-border-radius-lg: var(--sefin-radius-lg);
  --sefin-border-radius-xl: var(--sefin-radius-xl);
  --sefin-border-radius-2xl: var(--sefin-radius-2xl);
  --sefin-border-radius-full: var(--sefin-radius-full);

  // Shadows
  --sefin-shadow-none: none;
  --sefin-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sefin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --sefin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --sefin-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --sefin-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}