/* Semantic color tokens (final hex values). */

/* Light (default) */
:root,
:root[data-theme="light"] {
  /* Surfaces */
  --color-background: #FFFFFF;        /* background (white) */
  --color-elevated-surfaces: #ffffff; /* surface/cards (off-white) */
  --color-inverted-surface: #d2d0d0;  /* inverted-surface (dark-grey) */

  /* Text */
  --color-primary-text: #0F2542 ;      /* primary-text (navy) */
  --color-body-text: #0a0a0a;
  --color-secondary-text: #0a0a0a;    /* secondary-text (slate-grey) */
  --color-badge-text: #858585;
  --color-inverted-badge-text: #ffffff;        /* badge-text (white) */
  --color-inverted-text: #ffffff;        /* inverted-text (white) */


  /* Lines */
  --color-dividers: #cdd0d4;          /* dividers (light-cool-grey) */
  --color-borders: #cdd0d4;           /* borders (light-cool-grey) */
  --color-child-borders: #cdd0d4;     /* child-borders (lighter-cool-grey) */
  --color-highlight-border: #5B7FA6;  /* highlight-border (muted blue) */

  /* States - Muted/Soft */
  --color-warning: #ffb300;           /* warning (muted amber) */
  --color-error: #d3372c;             /* error (muted red) */
  --color-success: #26944e;           /* success (muted teal) */
  --color-link: #5B7FA6;              /* link (muted blue) */
  --color-action: #2a6beb;            /* action (muted blue) */
  --color-critical: #671414;          /* critical (muted deep red) */
  --color-workaround: #b256e7;        /* workaround (muted purple) */
  --color-identifier: #d2d0d0;        /* identifier (muted grey) */
  --color-updated: #199383;           /* recently-updated (bright blue) */

  /* Light mode colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #eaecf0;
  --color-bg-tertiary: #f0f0f0;
  --color-text-primary: #1e1e1e;
  --color-text-secondary: #5a5a5a;
  --color-text-tertiary: #999999;
  
  --color-border: #e1e4e8;
  --color-border-light: #e0e0e0;
  
  --color-primary: #0F2542;
  --color-primary-hover: #22508c;
  --color-primary-light: rgba(91, 127, 166, 0.1);
  
  --color-error-bg: #faf7f6;
  --color-error-border: #b8605a;
  
  --color-success-bg: #f6faf9;
  --color-success-border: #6ba599;
  
  --color-disabled: #b8b8b8;
  
  --gradient-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
}

Dark
:root[data-theme="dark"] {
  /* Surfaces */
  --color-background: #0B1220;        /* background (dark-navy) */
  --color-elevated-surfaces: #0B1220; /* elevated-surfaces (dark-grey) */
  --color-inverted-surface: #F8F9FB;  /* inverted-surface (off-white) */

  /* Text */
  --color-primary-text: #E5E7EB;      /* primary-text (light-grey) */
  --color-secondary-text: #9CA3AF;    /* secondary-text (medium-grey) */
  --color-badge-text: #1F2937;        /* badge-text (charcoal) */

  /* Lines */
  --color-dividers: #303A4A;          /* dividers (light-navy-grey) */
  --color-borders: #303A4A;           /* borders (light-navy-grey) */
  --color-child-borders: #404040;     /* child-borders (lighter-cool-grey) */
  --color-highlight-border: #7BA3D4;  /* highlight-border (muted soft blue) */

  /* States - Muted/Soft */
  --color-warning: #D4A024;           /* warning (muted amber) */
  --color-error: #D77A72;             /* error (muted soft red) */
  --color-success: #7FBFB0;           /* success (muted soft teal) */
  --color-link: #7BA3D4;              /* link (muted soft blue) */
  --color-action: #7BA3D4;            /* action (muted soft blue) */
  --color-critical: #D4807A;          /* critical (muted soft deep red) */
  --color-workaround: #A88FD4;        /* workaround (muted soft purple) */

  /* Dark mode colors */
  --color-bg-primary: #1e1e1e;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3a3a3a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #b0b0b0;
  --color-text-tertiary: #808080;
  
  --color-border: #404040;
  --color-border-light: #505050;
  
  --color-primary: #7BA3D4;
  --color-primary-hover: #6a92c3;
  --color-primary-light: rgba(123, 163, 212, 0.15);
  
  --color-error-bg: #2d1f1c;
  --color-error-border: #d77a72;
  
  --color-success-bg: #1a2a26;
  --color-success-border: #7fbfb0;
  
  --color-disabled: #6a6a6a;
  
  --gradient-bg: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Auto-dark when no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-background: #161618;
    --color-elevated-surfaces: #1a1a1c;
    --color-inverted-surface: #F5F5F5;

    --color-primary-text: #E5E7EB;
    --color-secondary-text: #E5E7EB;
    --color-badge-text: #9CA3AF;
    --color-body-text: #E5E7EB;
    --color-inverted-text: #161618;

    --color-dividers: #404040;
    --color-borders: #404040;
    --color-child-borders: #404040;     /* child-borders (lighter-cool-grey) */
    --color-highlight-border: #7BA3D4;  /* highlight-border (muted soft blue) */

    --color-warning: #D4A024;
    --color-error: #D77A72;
    --color-success: #7FBFB0;
    --color-link: #7BA3D4;
    --color-action: #7BA3D4;
    --color-critical: #D4807A;
    --color-workaround: #A88FD4;

    --color-bg-primary: #1e1e1e;
    --color-bg-secondary: #2d2d2d;
    --color-bg-tertiary: #3a3a3a;
    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-text-tertiary: #808080;
    
    --color-border: #404040;
    --color-border-light: #505050;
    
    --color-primary: #E5E7EB;
    --color-primary-hover: #F5F5F5;
    --color-primary-light: rgba(4, 5, 5, 0.15);
    
    --color-error-bg: #2d1f1c;
    --color-error-border: #d77a72;
    
    --color-success-bg: #1a2a26;
    --color-success-border: #7fbfb0;
    
    --color-disabled: #6a6a6a;
    
    --gradient-bg: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
  }
}