/* ============================================================
 * File: css/themes.css
 * Module: Theme Colors (v2: Clean Pro)
 * Purpose: Semantic color tokens for light + dark themes,
 *          plus one soft color pair per tool category.
 * Usage: <html data-theme="light"> or <html data-theme="dark">
 * Rule: Components must ONLY use these semantic tokens,
 *       never raw hex values.
 * ============================================================ */

/* ------------------------------------------------------------
 * LIGHT THEME (default): neutral zinc surfaces, indigo accent
 * ------------------------------------------------------------ */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* Surfaces */
  --color-bg:          #ffffff;
  --color-bg-subtle:   #f4f4f5;
  --color-surface:     #ffffff;
  --color-surface-2:   #f4f4f5;
  --color-elevated:    #ffffff;
  --color-input-bg:    #ffffff;
  --color-hover:       #f4f4f5;
  --color-active:      #e9e9ec;

  /* Sidebar (tinted so the shell reads as two zones) */
  --color-sidebar-bg:     #fafafa;
  --color-sidebar-hover:  #f0f0f2;
  --color-sidebar-active: #ececfb;

  /* Borders */
  --color-border:        #e4e4e7;
  --color-border-strong: #cfcfd6;

  /* Text */
  --color-text:         #18181b;
  --color-text-muted:   #52525b;
  --color-text-subtle:  #9f9faa;
  --color-text-inverse: #ffffff;

  /* Accent (indigo) */
  --color-accent:        #4f46e5;
  --color-accent-hover:  #4338ca;
  --color-accent-active: #3730a3;
  --color-accent-soft:   #eef2ff;
  --color-on-accent:     #ffffff;

  /* Status */
  --color-success:      #12805c;
  --color-success-soft: #e6f6ef;
  --color-warning:      #b25e09;
  --color-warning-soft: #fdf3e6;
  --color-danger:       #b42318;
  --color-danger-soft:  #fdeceb;
  --color-info:         #175cd3;
  --color-info-soft:    #eaf1fd;

  /* Category colors: soft tile background + readable icon color */
  --cat-data-bg:       #e8effd;  --cat-data-fg:       #175cd3;
  --cat-encoding-bg:   #f0eafd;  --cat-encoding-fg:   #6941c6;
  --cat-security-bg:   #e6f6ef;  --cat-security-fg:   #12805c;
  --cat-generators-bg: #fdf0e4;  --cat-generators-fg: #b25e09;
  --cat-conversion-bg: #e6f7f7;  --cat-conversion-fg: #0e7a7b;
  --cat-text-bg:       #fdeef4;  --cat-text-fg:       #b83280;
  --cat-color-bg:      #f3eafd;  --cat-color-fg:      #7c3aed;
  --cat-reference-bg:  #eef0f3;  --cat-reference-fg:  #475467;
  --cat-regex-bg:      #e9f6ec;  --cat-regex-fg:      #1a7f37;

  /* Focus + overlay */
  --color-focus-ring: rgba(79, 70, 229, 0.45);
  --color-overlay:    rgba(16, 24, 40, 0.45);

  /* Scrollbar */
  --color-scrollbar-thumb:       #cfcfd6;
  --color-scrollbar-thumb-hover: #b3b3bc;
  --color-scrollbar-track:       transparent;

  /* Selection */
  --color-selection-bg:   #dbe0ff;
  --color-selection-text: #18181b;

  /* Elevation (color-dependent, so declared per theme) */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

/* ------------------------------------------------------------
 * DARK THEME: deep zinc surfaces, brighter indigo accent
 * ------------------------------------------------------------ */
[data-theme='dark'] {
  color-scheme: dark;

  /* Surfaces */
  --color-bg:          #09090b;
  --color-bg-subtle:   #101013;
  --color-surface:     #131316;
  --color-surface-2:   #1b1b1f;
  --color-elevated:    #1b1b1f;
  --color-input-bg:    #101013;
  --color-hover:       #1b1b1f;
  --color-active:      #232329;

  /* Sidebar */
  --color-sidebar-bg:     #0d0d10;
  --color-sidebar-hover:  #17171b;
  --color-sidebar-active: rgba(99, 102, 241, 0.16);

  /* Borders */
  --color-border:        #232329;
  --color-border-strong: #34343c;

  /* Text */
  --color-text:         #f4f4f5;
  --color-text-muted:   #a1a1aa;
  --color-text-subtle:  #6d6d78;
  --color-text-inverse: #09090b;

  /* Accent (indigo) */
  --color-accent:        #818cf8;
  --color-accent-hover:  #a5b4fc;
  --color-accent-active: #6366f1;
  --color-accent-soft:   rgba(99, 102, 241, 0.16);
  --color-on-accent:     #ffffff;

  /* Status */
  --color-success:      #34d399;
  --color-success-soft: rgba(52, 211, 153, 0.14);
  --color-warning:      #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.14);
  --color-danger:       #f87171;
  --color-danger-soft:  rgba(248, 113, 113, 0.14);
  --color-info:         #60a5fa;
  --color-info-soft:    rgba(96, 165, 250, 0.14);

  /* Category colors (soft tints stay translucent on dark) */
  --cat-data-bg:       rgba(96, 165, 250, 0.15);   --cat-data-fg:       #7db4fc;
  --cat-encoding-bg:   rgba(167, 139, 250, 0.15); --cat-encoding-fg:   #b7a6fb;
  --cat-security-bg:   rgba(52, 211, 153, 0.14);  --cat-security-fg:   #5fd7ab;
  --cat-generators-bg: rgba(251, 191, 36, 0.14);  --cat-generators-fg: #f5c451;
  --cat-conversion-bg: rgba(45, 212, 191, 0.14);  --cat-conversion-fg: #57dcc9;
  --cat-text-bg:       rgba(244, 114, 182, 0.14); --cat-text-fg:       #f78fb8;
  --cat-color-bg:      rgba(192, 132, 252, 0.15); --cat-color-fg:      #cfa6fc;
  --cat-reference-bg:  rgba(161, 161, 170, 0.16); --cat-reference-fg:  #bdbdc6;
  --cat-regex-bg:      rgba(74, 222, 128, 0.14);  --cat-regex-fg:      #71d894;

  /* Focus + overlay */
  --color-focus-ring: rgba(129, 140, 248, 0.55);
  --color-overlay:    rgba(0, 0, 0, 0.60);

  /* Scrollbar */
  --color-scrollbar-thumb:       #34343c;
  --color-scrollbar-thumb-hover: #4a4a54;
  --color-scrollbar-track:       transparent;

  /* Selection */
  --color-selection-bg:   #2f3563;
  --color-selection-text: #f4f4f5;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.30);
}