/* Custom CSS for Color Tools documentation */

/* Color science themed styling */
:root {
    --color-brand-primary: #FF6B35;      /* Coral - warm, approachable */
    --color-brand-secondary: #004D7A;    /* Deep blue - trustworthy */
    --color-accent: #FFD23F;             /* Golden yellow - highlights */
    --color-success: #00BF63;            /* Green - success states */
    --color-warning: #FF8B00;            /* Orange - warnings */
}

/* Code blocks with color examples */
.highlight-color-example {
    border-left: 4px solid var(--color-brand-primary);
    padding: 1em;
    background-color: #f8f9fa;
    margin: 1em 0;
}

/* Color swatch display in documentation */
.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    margin: 0 5px;
    vertical-align: middle;
}

/* Mathematical formulas */
.math {
    font-family: "Computer Modern", "Latin Modern Math", serif;
}

/* Delta E values styling */
.delta-e-value {
    font-weight: bold;
    color: var(--color-brand-secondary);
}

/* API function signatures */
.sig-name {
    color: var(--color-brand-primary) !important;
}

/* Type hints */
.sig-paren, .sig-param {
    color: var(--color-brand-secondary);
}

/* Better table styling for color data */
table.docutils {
    border-collapse: collapse;
    margin: 1em 0;
}

table.docutils th {
    background-color: var(--color-brand-primary);
    color: white;
    padding: 8px 12px;
}

table.docutils td {
    padding: 6px 12px;
    border-bottom: 1px solid #ddd;
}

/* Code examples with better contrast */
.highlight pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1em;
}

/* Notes and warnings */
.admonition.note {
    border-color: var(--color-brand-secondary);
}

.admonition.warning {
    border-color: var(--color-warning);
}

.admonition.tip {
    border-color: var(--color-success);
}