/* ==========================================================================
   CSS Custom Properties — Design Tokens
   Extracted from figma-src/styles/theme.css and figma-src/styles/fonts.css
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Color Palette — Primary
     Source: figma-src/styles/theme.css --primary, --primary-foreground
     -------------------------------------------------------------------------- */
  --color-primary: #030213;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: #1a1a2e;

  /* --------------------------------------------------------------------------
     Color Palette — Secondary
     Source: figma-src/styles/theme.css --secondary, --secondary-foreground
     -------------------------------------------------------------------------- */
  --color-secondary: #ededf1;
  --color-secondary-foreground: #030213;
  --color-secondary-hover: #e0e0e6;

  /* --------------------------------------------------------------------------
     Color Palette — Accent / Muted
     Source: figma-src/styles/theme.css --accent, --muted
     -------------------------------------------------------------------------- */
  --color-accent: #e9ebef;
  --color-accent-foreground: #030213;
  --color-muted: #ececf0;
  --color-muted-foreground: #717182;

  /* --------------------------------------------------------------------------
     Color Palette — Destructive / Error
     Source: figma-src/styles/theme.css --destructive
     -------------------------------------------------------------------------- */
  --color-destructive: #d4183d;
  --color-destructive-foreground: #ffffff;
  --color-destructive-hover: #b8142f;
  --color-error: #d4183d;
  --color-error-light: #fef2f2;
  --color-error-border: #fca5a5;

  /* --------------------------------------------------------------------------
     Color Palette — Success
     -------------------------------------------------------------------------- */
  --color-success: #16a34a;
  --color-success-foreground: #ffffff;
  --color-success-light: #f0fdf4;
  --color-success-border: #86efac;

  /* --------------------------------------------------------------------------
     Color Palette — Warning
     -------------------------------------------------------------------------- */
  --color-warning: #ca8a04;
  --color-warning-foreground: #ffffff;
  --color-warning-light: #fefce8;
  --color-warning-border: #fde047;

  /* --------------------------------------------------------------------------
     Color Palette — Info
     -------------------------------------------------------------------------- */
  --color-info: #2563eb;
  --color-info-foreground: #ffffff;
  --color-info-light: #eff6ff;
  --color-info-border: #93c5fd;

  /* --------------------------------------------------------------------------
     Color Palette — Neutral Shades
     -------------------------------------------------------------------------- */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  /* --------------------------------------------------------------------------
     Color Palette — Background & Surface
     Source: figma-src/styles/theme.css --background, --card
     -------------------------------------------------------------------------- */
  --color-background: #ffffff;
  --color-foreground: #0a0a0a;
  --color-card: #ffffff;
  --color-card-foreground: #0a0a0a;
  --color-popover: #ffffff;
  --color-popover-foreground: #0a0a0a;
  --color-page-bg: #f9fafb;

  /* --------------------------------------------------------------------------
     Color Palette — Border & Input
     Source: figma-src/styles/theme.css --border, --input, --input-background
     -------------------------------------------------------------------------- */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.2);
  --color-input: transparent;
  --color-input-background: #f3f3f5;
  --color-switch-background: #cbced4;
  --color-ring: #a3a3a3;

  /* --------------------------------------------------------------------------
     Color Palette — Sidebar
     Source: figma-src/styles/theme.css --sidebar-*
     -------------------------------------------------------------------------- */
  --color-sidebar: #fafafa;
  --color-sidebar-foreground: #0a0a0a;
  --color-sidebar-primary: #030213;
  --color-sidebar-primary-foreground: #fafafa;
  --color-sidebar-accent: #f5f5f5;
  --color-sidebar-accent-foreground: #171717;
  --color-sidebar-border: #e5e5e5;

  /* --------------------------------------------------------------------------
     Color Palette — Chart
     Source: figma-src/styles/theme.css --chart-1 through --chart-5
     -------------------------------------------------------------------------- */
  --color-chart-1: #e76e50;
  --color-chart-2: #2a9d8f;
  --color-chart-3: #264653;
  --color-chart-4: #e9c46a;
  --color-chart-5: #f4a261;

  /* --------------------------------------------------------------------------
     Color Palette — Status Badge Colors
     Used by components.css for .badge--active, .badge--testing, .badge--inactive
     -------------------------------------------------------------------------- */
  --color-status-active: #16a34a;
  --color-status-active-bg: #f0fdf4;
  --color-status-testing: #ca8a04;
  --color-status-testing-bg: #fefce8;
  --color-status-inactive: #6b7280;
  --color-status-inactive-bg: #f3f4f6;

  /* --------------------------------------------------------------------------
     Color Palette — Role Badge Colors
     -------------------------------------------------------------------------- */
  --color-role-owner: #7c3aed;
  --color-role-owner-bg: #f5f3ff;
  --color-role-manager: #2563eb;
  --color-role-manager-bg: #eff6ff;
  --color-role-member: #6b7280;
  --color-role-member-bg: #f3f4f6;

  /* --------------------------------------------------------------------------
     Color Palette — Delegation Type Badge Colors
     -------------------------------------------------------------------------- */
  --color-deleg-full: #030213;
  --color-deleg-full-bg: #f3f4f6;
  --color-deleg-readonly: #6b7280;
  --color-deleg-readonly-bg: #f9fafb;
  --color-deleg-expired: #9ca3af;
  --color-deleg-expired-bg: #f3f4f6;

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

  /* --------------------------------------------------------------------------
     Border Radius
     Source: figma-src/styles/theme.css --radius: 0.625rem (10px)
     -------------------------------------------------------------------------- */
  --radius-sm: 0.375rem;   /* 6px  — radius - 4px */
  --radius-md: 0.5rem;     /* 8px  — radius - 2px */
  --radius-lg: 0.625rem;   /* 10px — base radius */
  --radius-xl: 1.025rem;   /* ~16px — radius + 4px */
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Font Family
     Source: figma-src/styles/fonts.css (empty — using system font stack)
     -------------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* --------------------------------------------------------------------------
     Font Size Scale
     -------------------------------------------------------------------------- */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px — matches figma --font-size */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */

  /* --------------------------------------------------------------------------
     Font Weight
     Source: figma-src/styles/theme.css --font-weight-normal, --font-weight-medium
     -------------------------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --------------------------------------------------------------------------
     Line Height
     Source: figma-src/styles/theme.css h1-h4 line-height: 1.5
     -------------------------------------------------------------------------- */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* --------------------------------------------------------------------------
     Box Shadow
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* --------------------------------------------------------------------------
     Z-Index Layers
     -------------------------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-dialog: 400;
  --z-toast: 500;

  /* --------------------------------------------------------------------------
     Transition Durations
     -------------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --transition-colors: color var(--duration-normal) ease,
    background-color var(--duration-normal) ease,
    border-color var(--duration-normal) ease;
  --transition-shadow: box-shadow var(--duration-normal) ease;
  --transition-transform: transform var(--duration-normal) ease;
  --transition-opacity: opacity var(--duration-normal) ease;

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */
  --sidebar-width: 256px;
  --max-content-width: 1280px;
  --header-height: 64px;

  /* --------------------------------------------------------------------------
     Responsive Breakpoints (reference only — use in @media queries)
     - Large:  min-width: 1024px  → 3-column grid
     - Medium: min-width: 768px   → 2-column grid
     - Small:  below 768px        → 1-column grid, sidebar collapses
     -------------------------------------------------------------------------- */
}