/* =====================================================================
 * FlexOps Unified Design Tokens
 * =====================================================================
 * Single source of truth for all FlexOps Blazor portals.
 * Import this file in every portal's index.html or App.razor BEFORE
 * the portal's own theme.css.
 *
 * Naming convention: --flexops-{category}-{variant}
 * Categories: brand, gray, error, warning, success, blue, text, bg,
 *             border, fg, font, radius, shadow, space, transition
 *
 * Aligned with the Next.js marketing site (src/styles/theme.css).
 * =====================================================================
 * Copyright (c) 2021-2026 by FlexOps, LLC. All rights reserved.
 * =================================================================== */

:root {
  /* -----------------------------------------------------------------
   * Brand Purple (primary)
   * ----------------------------------------------------------------- */
  --flexops-brand-25: #FAFAFF;
  --flexops-brand-50: #F4F3FF;
  --flexops-brand-100: #EBE9FE;
  --flexops-brand-200: #D9D6FE;
  --flexops-brand-300: #BDB4FE;
  --flexops-brand-400: #9B8AFB;
  --flexops-brand-500: #7A5AF8;
  --flexops-brand-600: #6938EF;
  --flexops-brand-700: #5925DC;
  --flexops-brand-800: #4A1FB8;
  --flexops-brand-900: #3E1C96;
  --flexops-brand-950: #27115F;

  /* -----------------------------------------------------------------
   * Gray (neutral)
   * ----------------------------------------------------------------- */
  --flexops-gray-25: #FDFDFD;
  --flexops-gray-50: #FAFAFA;
  --flexops-gray-100: #F5F5F5;
  --flexops-gray-200: #E9EAEB;
  --flexops-gray-300: #D5D7DA;
  --flexops-gray-400: #A4A7AE;
  --flexops-gray-500: #717680;
  --flexops-gray-600: #535862;
  --flexops-gray-700: #414651;
  --flexops-gray-800: #252B37;
  --flexops-gray-900: #181D27;
  --flexops-gray-950: #0A0D12;

  /* -----------------------------------------------------------------
   * Error (red)
   * ----------------------------------------------------------------- */
  --flexops-error-25: #FFFBFA;
  --flexops-error-50: #FEF3F2;
  --flexops-error-100: #FEE4E2;
  --flexops-error-200: #FECDCA;
  --flexops-error-300: #FDA29B;
  --flexops-error-400: #F97066;
  --flexops-error-500: #F04438;
  --flexops-error-600: #D92D20;
  --flexops-error-700: #B42318;
  --flexops-error-800: #912018;
  --flexops-error-900: #7A271A;
  --flexops-error-950: #55160C;

  /* -----------------------------------------------------------------
   * Warning (amber)
   * ----------------------------------------------------------------- */
  --flexops-warning-25: #FFFCF5;
  --flexops-warning-50: #FFFAEB;
  --flexops-warning-100: #FEF0C7;
  --flexops-warning-200: #FEDF89;
  --flexops-warning-300: #FEC84B;
  --flexops-warning-400: #FDB022;
  --flexops-warning-500: #F79009;
  --flexops-warning-600: #DC6803;
  --flexops-warning-700: #B54708;
  --flexops-warning-800: #93370D;
  --flexops-warning-900: #7A2E0E;
  --flexops-warning-950: #4E1D09;

  /* -----------------------------------------------------------------
   * Success (green)
   * ----------------------------------------------------------------- */
  --flexops-success-25: #F6FEF9;
  --flexops-success-50: #ECFDF3;
  --flexops-success-100: #DCFAE6;
  --flexops-success-200: #ABEFC6;
  --flexops-success-300: #75E0A7;
  --flexops-success-400: #47CD89;
  --flexops-success-500: #17B26A;
  --flexops-success-600: #079455;
  --flexops-success-700: #067647;
  --flexops-success-800: #085D3A;
  --flexops-success-900: #074D31;
  --flexops-success-950: #053321;

  /* -----------------------------------------------------------------
   * Blue (info)
   * ----------------------------------------------------------------- */
  --flexops-blue-50: #EFF8FF;
  --flexops-blue-100: #D1E9FF;
  --flexops-blue-500: #2E90FA;
  --flexops-blue-600: #1570EF;
  --flexops-blue-700: #175CD3;

  /* -----------------------------------------------------------------
   * Semantic: Text
   * ----------------------------------------------------------------- */
  --flexops-text-primary: var(--flexops-gray-900);
  --flexops-text-secondary: var(--flexops-gray-700);
  --flexops-text-tertiary: var(--flexops-gray-600);
  --flexops-text-quaternary: var(--flexops-gray-500);
  --flexops-text-disabled: var(--flexops-gray-500);
  --flexops-text-placeholder: var(--flexops-gray-600);
  --flexops-text-white: #FFFFFF;
  --flexops-text-brand-primary: var(--flexops-brand-600);
  --flexops-text-brand-secondary: var(--flexops-brand-500);
  --flexops-text-error-primary: var(--flexops-error-600);
  --flexops-text-warning-primary: var(--flexops-warning-600);
  --flexops-text-success-primary: var(--flexops-success-600);

  /* -----------------------------------------------------------------
   * Semantic: Background
   * ----------------------------------------------------------------- */
  --flexops-bg-primary: #FFFFFF;
  --flexops-bg-secondary: var(--flexops-gray-50);
  --flexops-bg-tertiary: var(--flexops-gray-100);
  --flexops-bg-quaternary: var(--flexops-gray-200);
  --flexops-bg-disabled: var(--flexops-gray-100);
  --flexops-bg-active: var(--flexops-gray-50);
  --flexops-bg-brand-primary: var(--flexops-brand-50);
  --flexops-bg-brand-secondary: var(--flexops-brand-100);
  --flexops-bg-brand-solid: var(--flexops-brand-600);
  --flexops-bg-brand-solid-hover: var(--flexops-brand-700);
  --flexops-bg-brand-section: var(--flexops-brand-800);
  --flexops-bg-error-primary: var(--flexops-error-50);
  --flexops-bg-error-solid: var(--flexops-error-600);
  --flexops-bg-warning-primary: var(--flexops-warning-50);
  --flexops-bg-warning-solid: var(--flexops-warning-600);
  --flexops-bg-success-primary: var(--flexops-success-50);
  --flexops-bg-success-solid: var(--flexops-success-600);
  --flexops-bg-overlay: var(--flexops-gray-950);

  /* -----------------------------------------------------------------
   * Semantic: Border
   * ----------------------------------------------------------------- */
  --flexops-border-primary: var(--flexops-gray-300);
  --flexops-border-secondary: var(--flexops-gray-200);
  --flexops-border-tertiary: var(--flexops-gray-100);
  --flexops-border-brand: var(--flexops-brand-500);
  --flexops-border-error: var(--flexops-error-500);
  --flexops-border-disabled: var(--flexops-gray-300);

  /* -----------------------------------------------------------------
   * Semantic: Foreground (icons, decorative elements)
   * ----------------------------------------------------------------- */
  --flexops-fg-primary: var(--flexops-gray-900);
  --flexops-fg-secondary: var(--flexops-gray-700);
  --flexops-fg-tertiary: var(--flexops-gray-600);
  --flexops-fg-quaternary: var(--flexops-gray-400);
  --flexops-fg-disabled: var(--flexops-gray-400);
  --flexops-fg-brand-primary: var(--flexops-brand-600);
  --flexops-fg-white: #FFFFFF;

  /* -----------------------------------------------------------------
   * Typography
   * ----------------------------------------------------------------- */
  --flexops-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --flexops-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --flexops-font-mono: ui-monospace, "Roboto Mono", "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* -----------------------------------------------------------------
   * Border Radius
   * ----------------------------------------------------------------- */
  --flexops-radius-none: 0px;
  --flexops-radius-xs: 0.125rem;  /* 2px */
  --flexops-radius-sm: 0.25rem;   /* 4px */
  --flexops-radius-md: 0.375rem;  /* 6px */
  --flexops-radius-lg: 0.5rem;    /* 8px */
  --flexops-radius-xl: 0.75rem;   /* 12px */
  --flexops-radius-2xl: 1rem;     /* 16px */
  --flexops-radius-3xl: 1.5rem;   /* 24px */
  --flexops-radius-full: 9999px;

  /* -----------------------------------------------------------------
   * Shadows
   * ----------------------------------------------------------------- */
  --flexops-shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
  --flexops-shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
  --flexops-shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
  --flexops-shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  --flexops-shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  --flexops-shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
  --flexops-shadow-focus: 0 0 0 3px rgba(122, 90, 248, 0.12);

  /* -----------------------------------------------------------------
   * Spacing
   * ----------------------------------------------------------------- */
  --flexops-space-0: 0;
  --flexops-space-1: 0.25rem;   /* 4px */
  --flexops-space-2: 0.5rem;    /* 8px */
  --flexops-space-3: 0.75rem;   /* 12px */
  --flexops-space-4: 1rem;      /* 16px */
  --flexops-space-5: 1.25rem;   /* 20px */
  --flexops-space-6: 1.5rem;    /* 24px */
  --flexops-space-8: 2rem;      /* 32px */
  --flexops-space-10: 2.5rem;   /* 40px */
  --flexops-space-12: 3rem;     /* 48px */
  --flexops-space-16: 4rem;     /* 64px */
  --flexops-space-20: 5rem;     /* 80px */

  /* -----------------------------------------------------------------
   * Transitions
   * ----------------------------------------------------------------- */
  --flexops-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --flexops-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --flexops-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* -----------------------------------------------------------------
   * Semantic aliases (--color-*, --shadow-skeumorphic)
   * Used by the shared Radzen overrides and portal site.css files.
   * ----------------------------------------------------------------- */

  /* Text */
  --color-text-primary: var(--flexops-text-primary);
  --color-text-secondary: var(--flexops-text-secondary);
  --color-text-tertiary: var(--flexops-text-tertiary);
  --color-text-quaternary: var(--flexops-text-quaternary);
  --color-text-disabled: var(--flexops-text-disabled);
  --color-text-placeholder: var(--flexops-text-placeholder);
  --color-text-white: var(--flexops-text-white);

  /* Background */
  --color-bg-primary: var(--flexops-bg-primary);
  --color-bg-secondary: var(--flexops-bg-secondary);
  --color-bg-tertiary: var(--flexops-bg-tertiary);
  --color-bg-disabled: var(--flexops-bg-disabled);
  --color-bg-brand-primary: var(--flexops-bg-brand-primary);
  --color-bg-brand-solid: var(--flexops-bg-brand-solid);
  --color-bg-brand-solid_hover: var(--flexops-bg-brand-solid-hover);
  --color-bg-error-primary: var(--flexops-bg-error-primary);
  --color-bg-error-solid: var(--flexops-bg-error-solid);
  --color-bg-success-primary: var(--flexops-bg-success-primary);
  --color-bg-warning-primary: var(--flexops-bg-warning-primary);

  /* Border */
  --color-border-primary: var(--flexops-border-primary);
  --color-border-secondary: var(--flexops-border-secondary);
  --color-border-tertiary: var(--flexops-border-tertiary);
  --color-border-brand: var(--flexops-border-brand);
  --color-border-error: var(--flexops-border-error);
  --color-border-disabled: var(--flexops-border-disabled);

  /* Foreground */
  --color-fg-brand-primary: var(--flexops-fg-brand-primary);
  --color-fg-success-primary: var(--flexops-success-600);
  --color-fg-warning-primary: var(--flexops-warning-600);
  --color-fg-error-primary: var(--flexops-error-600);

  /* Text — additional semantic */
  --color-text-error-primary: var(--flexops-text-error-primary);
  --color-text-warning-primary: var(--flexops-text-warning-primary);
  --color-text-success-primary: var(--flexops-text-success-primary);

  /* Status stop aliases */
  --color-success-200: var(--flexops-success-200);
  --color-success-500: var(--flexops-success-500);
  --color-success-600: var(--flexops-success-600);
  --color-success-700: var(--flexops-success-700);
  --color-error-200: var(--flexops-error-200);
  --color-error-500: var(--flexops-error-500);
  --color-error-600: var(--flexops-error-600);
  --color-error-700: var(--flexops-error-700);
  --color-warning-200: var(--flexops-warning-200);
  --color-warning-400: var(--flexops-warning-400);
  --color-warning-500: var(--flexops-warning-500);
  --color-warning-600: var(--flexops-warning-600);
  --color-warning-700: var(--flexops-warning-700);
  --color-blue-500: var(--flexops-blue-500);
  --color-blue-600: var(--flexops-blue-600);
  --color-blue-700: var(--flexops-blue-700);

  /* Skeumorphic shadow */
  --shadow-skeumorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
  --shadow-xs-skeumorphic: var(--shadow-skeumorphic), var(--flexops-shadow-xs);

  /* Settings Hub / API Portal / Identity Portal palette aliases */
  --color-brand-25: var(--flexops-brand-25);
  --color-brand-50: var(--flexops-brand-50);
  --color-brand-100: var(--flexops-brand-100);
  --color-brand-200: var(--flexops-brand-200);
  --color-brand-300: var(--flexops-brand-300);
  --color-brand-400: var(--flexops-brand-400);
  --color-brand-500: var(--flexops-brand-500);
  --color-brand-600: var(--flexops-brand-600);
  --color-brand-700: var(--flexops-brand-700);
  --color-brand-800: var(--flexops-brand-800);
  --color-brand-900: var(--flexops-brand-900);
  --color-brand-950: var(--flexops-brand-950);

  --color-gray-25: var(--flexops-gray-25);
  --color-gray-50: var(--flexops-gray-50);
  --color-gray-100: var(--flexops-gray-100);
  --color-gray-200: var(--flexops-gray-200);
  --color-gray-300: var(--flexops-gray-300);
  --color-gray-400: var(--flexops-gray-400);
  --color-gray-500: var(--flexops-gray-500);
  --color-gray-600: var(--flexops-gray-600);
  --color-gray-700: var(--flexops-gray-700);
  --color-gray-800: var(--flexops-gray-800);
  --color-gray-900: var(--flexops-gray-900);
  --color-gray-950: var(--flexops-gray-950);

  --font-body: var(--flexops-font-body);
  --font-display: var(--flexops-font-display);
  --font-mono: var(--flexops-font-mono);

  --radius-xs: var(--flexops-radius-xs);
  --radius-sm: var(--flexops-radius-sm);
  --radius-md: var(--flexops-radius-md);
  --radius-lg: var(--flexops-radius-lg);
  --radius-xl: var(--flexops-radius-xl);
  --radius-2xl: var(--flexops-radius-2xl);
  --radius-3xl: var(--flexops-radius-3xl);
  --radius-full: var(--flexops-radius-full);

  --shadow-xs: var(--flexops-shadow-xs);
  --shadow-sm: var(--flexops-shadow-sm);
  --shadow-md: var(--flexops-shadow-md);
  --shadow-lg: var(--flexops-shadow-lg);
  --shadow-xl: var(--flexops-shadow-xl);
  --shadow-2xl: var(--flexops-shadow-2xl);

  --color-focus-ring: var(--flexops-shadow-focus);
}