/* Theme system variables and settings */

/* Base theme configuration - core theme system */
:root {
  /* Default theme tracking variables */
  --theme-source: system;
  --theme-mode: light;
  --theme-effective: light;
}

:root {
  /* For color palette exploration, see https://coolors.co */
  /* https://coolors.co/400000-531919-653231-784c4a-8a6563-9d7e7b-af9794-c2b1ad-d4cac5-e7e3de */
  --c00: #110000ff; /* Added for near black */
  --c01: #400000ff; /* black-bean */
  --c02: #531919ff; /* caput-mortuum */
  --c03: #653231ff; /* wine */
  --c04: #784c4aff; /* tuscan-red */
  --c05: #8a6563ff; /* deep-taupe */
  --c06: #9d7e7bff; /* burnished-brown */
  --c07: #af9794ff; /* tuscany */
  --c08: #c2b1adff; /* black-shadows */
  --c09: #d4cac5ff; /* pale-silver */
  --c10: #e7e3deff; /* platinum */

  --gray-00: #f8f9faff;
  --gray-01: #e9ecefff;
  --gray-02: #dee2e6ff;
  --gray-03: #ced4daff;
  --gray-04: #adb5bdff;
  --gray-05: #6c757dff;
  --gray-06: #495057ff;
  --gray-07: #343a40ff;
  --gray-08: #212529ff;
  
  /* Non-theme specific variables */

  --button-border-radius: min(1vw, 1vh);
  --layout-slot-padding: 8px;
  --panel-title-font-size: 125%;
  --panel-title-weight: bold;
  --panel-margin-bottom: 2px;
  --panel-titlebar-height: 48px;
  --debug-bgcolor: #ffb;
  --main-font-family: 'Open Sans', sans-serif;
    font-family: var(--main-font-family);
  --hitcount-color: var(--gray-05);

  /* Spacing variables */
  --space-xxs: 0.125rem;  /* 2px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.25rem;    /* 20px */
  --space-xl: 1.75rem;    /* 28px */

  /* Font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Font sizes */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-md: 1rem;      /* 16px */
  --fs-lg: 1.25rem;   /* 20px */

  /* Border radius */
  --radius-sm: 0.1875rem;  /* 3px */
  --radius-md: 0.25rem;    /* 4px */

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Light theme variables */
:root:not(.dark-theme) {
  /* Basic theme colors */
  --fgcolor: var(--c03);
  --bgcolor: var(--c10);
  --bdcolor: var(--c05);
  --fgcolor_dim: var(--gray-03);
  --fgcolor_dim_text: var(--c05);

  /* Button colors */
  --button-bgcolor: var(--c01);
  --button-bgcolor-hover: var(--c03);
  --button-fgcolor: var(--c10);
  --button-bdcolor: var(--bdcolor);
  --button-bgcolor-disabled: var(--gray-03);
  --button-fgcolor-disabled: var(--gray-07);

  /* Label colors */
  --label-fgcolor: var(--c03);
  --label-bgcolor: var(--c07);

  /* Menu colors */
  --menu-bgcolor: var(--c01);
  --menu-hilite-bgcolor: var(--c08);
  --menu-hilite-fgcolor: var(--c00);

  /* Accent colors */
  --accent-color: var(--c04);                  /* Tuscan red */
  --accent-bgcolor: var(--c09);                /* Pale silver */

  /* Other UI element colors */
  --slot-underline-color: var(--c02);
  --underline_color: var(--c07);
  --debug-fgcolor: var(--gray-07);

  /* Highlight colors */
  --primary-hilite-bgcolor: #ff4;
  --primary-hilite-fgcolor: var(--gray-08);
  --primary-hilite-bdcolor: var(--gray-08);

  /* Title bar colors */
  --title-bar-bgcolor: var(--c01);
  --title-bar-fgcolor: var(--c10);

  /* Banner semantic colors */
  --bgcolor-banner: var(--c09);
  --fgcolor-banner: var(--c03);
  --bdcolor-banner: var(--c07);
  --icon-color-banner: var(--c04);
  --email-color: var(--c01);
  --dismiss-color: var(--c04);

  /* Page semantic colors */
  --card-bgcolor: var(--bgcolor);
  --card-bdcolor: var(--c08);
  --heading-color: var(--c03);
  --text-color: var(--fgcolor);
  --secondary-text-color: var(--c05);
  --step-number-bgcolor: var(--c03);
  --step-number-color: var(--c10);
  --step-title-color: var(--c04);
  --note-bgcolor: var(--c09);
  --note-bdcolor: var(--c07);
  --note-color: var(--c02);
  /* Status message toast colors */
  --success-color: var(--c06);               /* Burnished brown - calmest */
  --success-bgcolor: var(--c10);             /* Platinum */
  --success-bdcolor: var(--c08);             /* Black shadows */
  --error-color: var(--c01);                 /* Black-bean - most intense */
  --error-bgcolor: var(--c09);               /* Pale silver */
  --error-bdcolor: var(--c04);               /* Tuscan red */

  /* Causation graph node colors (uniform — kind is shown via text label) */
  --causation-color: var(--c04);                           /* Tuscan red */
  --causation-bgcolor: var(--c09);                         /* Pale silver */
  --causation-bdcolor: var(--c07);                         /* Tuscany */

  /* Causation kind colors - foreground (text/icons, used by badges) */
  --causation-operator-color: var(--success-color);        /* Green - produces new state */
  --causation-evaluator-color: var(--c04);                 /* Tuscan red used as accent */
  --causation-constructor-color: var(--c03);               /* Wine - creates new structures */
  --causation-generic-color: var(--secondary-text-color);  /* Muted - basic coupling */

  /* Causation kind colors - background (badges/highlights) */
  --causation-operator-bgcolor: var(--success-bgcolor);
  --causation-evaluator-bgcolor: var(--c09);               /* Pale silver */
  --causation-constructor-bgcolor: var(--c09);             /* Pale silver */
  --causation-generic-bgcolor: var(--gray-01);

  /* Causation kind colors - border */
  --causation-operator-bdcolor: var(--success-bdcolor);
  --causation-evaluator-bdcolor: var(--c07);               /* Tuscany */
  --causation-constructor-bdcolor: var(--c07);             /* Tuscany */
  --causation-generic-bdcolor: var(--gray-03);

  /* Info color (for supplemental UI elements like chain indicators) */
  --info-color: var(--c04);                                /* Tuscan red */
  --info-bgcolor: var(--c09);                              /* Pale silver */
  --info-bdcolor: var(--c07);                              /* Tuscany */

  /* Warning color (for caution states) */
  --warning-color: var(--c03);                             /* Wine */
  --warning-bgcolor: var(--c09);                           /* Pale silver */
  --warning-bdcolor: var(--c06);                           /* Burnished brown */

  /* Standardized variables for profile settings components */
  --bgcolor-card-surround: var(--c08);
  --toc-heading-bgcolor: var(--c08);
  --toc-heading-fgcolor: var(--fgcolor);
  --toc-item-bgcolor: var(--bgcolor);
  --toc-item-hover-bgcolor: var(--c08);
  --toc-item-selected-bgcolor: var(--c06);
  --toc-item-selected-fgcolor: var(--c10);
  --toc-border-color: var(--c06);
  --toc-icon-color: var(--c05);

  /* Panel compatibility aliases */
  --card-border-color: var(--card-bdcolor);
  --card-hover-bgcolor: var(--c09);            /* Pale silver */
  --card-bgcolor-2: var(--c09);                /* Pale silver */
  --code-bgcolor: var(--c09);                  /* Pale silver */
  --accent-text-color: var(--bgcolor);
  --button-border-color: var(--button-bdcolor);
  --button-hover-bgcolor: var(--button-bgcolor-hover);
  --info-fgcolor: var(--info-color);
  --warning-fgcolor: var(--warning-color);
  --success-fgcolor: var(--success-color);
  --error-fgcolor: var(--error-color);

  /* Link colors */
  --link-color: var(--c04);
  --link-hover-color: var(--c05);
  --link-visited-color: var(--c04);
}

/* Dark theme variables */
:root.dark-theme {
  /* Basic theme colors */
  --fgcolor: var(--c10);
  --bgcolor: var(--c00);
  --bdcolor: var(--c06);
  --fgcolor_dim: var(--gray-08);
  --fgcolor_dim_text: var(--c05);

  /* Button colors */
  --button-bgcolor: var(--c09);
  --button-bgcolor-hover: var(--c07);
  --button-fgcolor: var(--c01);
  --button-bdcolor: var(--bdcolor);
  --button-bgcolor-disabled: var(--c09);
  --button-fgcolor-disabled: var(--c04);

  /* Label colors */
  --label-fgcolor: var(--c07);
  --label-bgcolor: var(--c03);

  /* Menu colors */
  --menu-bgcolor: var(--c09);
  --menu-hilite-bgcolor: var(--c08);
  --menu-hilite-fgcolor: var(--c00);

  /* Accent colors */
  --accent-color: var(--c07);                  /* Tuscany */
  --accent-bgcolor: var(--c03);                /* Wine */

  /* Other UI element colors */
  --slot-underline-color: var(--c04);
  --underline_color: var(--c03);
  --debug-fgcolor: var(--gray-03);

  /* Highlight colors */
  --primary-hilite-bgcolor: #aa4;
  --primary-hilite-fgcolor: var(--gray-08);
  --primary-hilite-bdcolor: var(--gray-07);

  /* Title bar colors */
  --title-bar-bgcolor: var(--c01);
  --title-bar-fgcolor: var(--c10);

  /* Banner semantic colors */
  --bgcolor-banner: var(--c03);
  --fgcolor-banner: var(--c10);
  --bdcolor-banner: var(--c06);
  --icon-color-banner: var(--c08);
  --email-color: var(--c10);
  --dismiss-color: var(--c08);

  /* Page semantic colors */
  --card-bgcolor: var(--bgcolor);
  --card-bdcolor: var(--c07);
  --heading-color: var(--c07);
  --text-color: var(--fgcolor);
  --secondary-text-color: var(--c08);
  --step-number-bgcolor: var(--c03);
  --step-number-color: var(--c10);
  --step-title-color: var(--c05);
  --note-bgcolor: var(--c03);
  --note-bdcolor: var(--c06);
  --note-color: var(--c10);
  --success-color: var(--c08);               /* Black shadows - calmest */
  --success-bgcolor: var(--c03);             /* Wine */
  --success-bdcolor: var(--c06);             /* Burnished brown */
  --error-color: var(--c10);                 /* Platinum - most intense */
  --error-bgcolor: var(--c02);               /* Caput mortuum */
  --error-bdcolor: var(--c04);               /* Tuscan red */

  /* Causation graph node colors (uniform — kind is shown via text label) */
  --causation-color: var(--c08);                           /* Black shadows */
  --causation-bgcolor: var(--c03);                         /* Wine */
  --causation-bdcolor: var(--c05);                         /* Deep taupe */

  /* Causation kind colors - foreground (text/icons) */
  --causation-operator-color: var(--success-color);        /* Lighter green for dark bg */
  --causation-evaluator-color: var(--c08);                 /* Black shadows - readable on dark */
  --causation-constructor-color: var(--c07);               /* Tuscany - readable on dark */
  --causation-generic-color: var(--secondary-text-color);  /* Muted */

  /* Causation kind colors - background (badges/highlights) */
  --causation-operator-bgcolor: var(--success-bgcolor);
  --causation-evaluator-bgcolor: var(--c03);               /* Wine */
  --causation-constructor-bgcolor: var(--c03);             /* Wine */
  --causation-generic-bgcolor: var(--gray-07);

  /* Causation kind colors - border */
  --causation-operator-bdcolor: var(--success-bdcolor);
  --causation-evaluator-bdcolor: var(--c05);               /* Deep taupe */
  --causation-constructor-bdcolor: var(--c05);             /* Deep taupe */
  --causation-generic-bdcolor: var(--gray-06);

  /* Info color (for supplemental UI elements like chain indicators) */
  --info-color: var(--c08);                                /* Black shadows */
  --info-bgcolor: var(--c03);                              /* Wine */
  --info-bdcolor: var(--c05);                              /* Deep taupe */

  /* Warning color (for caution states) */
  --warning-color: var(--c07);                             /* Tuscany */
  --warning-bgcolor: var(--c03);                           /* Wine */
  --warning-bdcolor: var(--c05);                           /* Deep taupe */

  /* Standardized variables for profile settings components */
  --bgcolor-card-surround: var(--c04);
  --toc-heading-bgcolor: var(--c04);
  --toc-heading-fgcolor: var(--fgcolor);
  --toc-item-bgcolor: var(--bgcolor);
  --toc-item-hover-bgcolor: var(--c04);
  --toc-item-selected-bgcolor: var(--c03);
  --toc-item-selected-fgcolor: var(--c10);
  --toc-border-color: var(--c06);
  --toc-icon-color: var(--c05);

  /* Panel compatibility aliases */
  --card-border-color: var(--card-bdcolor);
  --card-hover-bgcolor: var(--c02);            /* Caput mortuum */
  --card-bgcolor-2: var(--c02);                /* Caput mortuum */
  --code-bgcolor: var(--c02);                  /* Caput mortuum */
  --accent-text-color: var(--bgcolor);
  --button-border-color: var(--button-bdcolor);
  --button-hover-bgcolor: var(--button-bgcolor-hover);
  --info-fgcolor: var(--info-color);
  --warning-fgcolor: var(--warning-color);
  --success-fgcolor: var(--success-color);
  --error-fgcolor: var(--error-color);

  /* Link colors */
  --link-color: var(--c07);
  --link-hover-color: var(--c08);
  --link-visited-color: var(--c07);
}