/* some root colors are customized */
/* custom colors are slightly brighter */

@import "../chroma/base.css";
/* @import "../chroma/dark.css"; */
/* @import "../codemirror/dark.css"; */

:root {
    --is-dark-theme: true;
    --color-primary: #ff8906 !important;
    --color-primary-contrast: #fff6d5;
    --color-primary-dark-1: #e67d05;
    --color-primary-dark-2: #cc6f04 !important;
    --color-primary-dark-3: #b36204 !important;
    --color-primary-dark-4: #995403 !important;
    --color-primary-dark-5: #804603;
    --color-primary-dark-6: #663802 !important;
    --color-primary-dark-7: #4d2b02;
    --color-primary-light-1: #ff9516 !important;
    --color-primary-light-2: #ffa126 !important;
    --color-primary-light-3: #ffad36;
    --color-primary-light-4: #ffb946 !important;
    --color-primary-light-5: #ffc556;
    --color-primary-light-6: #ffd166;
    --color-primary-light-7: #ffdd76;
    --color-primary-alpha-10: #ff890619;
    --color-primary-alpha-20: #ff890633;
    --color-primary-alpha-30: #ff89064b;
    --color-primary-alpha-40: #ff890666;
    --color-primary-alpha-50: #ff890680;
    --color-primary-alpha-60: #ff890699;
    --color-primary-alpha-70: #ff8906b3;
    --color-primary-alpha-80: #ff8906cc;
    --color-primary-alpha-90: #ff8906e1;
    --color-primary-hover: var(--color-primary-dark-2) !important;
    --color-primary-active: var(--color-primary-light-2);
    --color-secondary: #383455;
    --color-secondary-dark-1: #322f4c;
    --color-secondary-dark-2: #2d2a44;
    --color-secondary-dark-3: #27253b;
    --color-secondary-dark-4: #211f33;
    --color-secondary-dark-5: #1b1a2a;
    --color-secondary-dark-6: #151422;
    --color-secondary-dark-7: #0f0f19;
    --color-secondary-dark-8: #0a0a11;
    --color-secondary-dark-9: #040408;
    --color-secondary-dark-10: #000000;
    --color-secondary-dark-11: #000000;
    --color-secondary-dark-12: #000000;
    --color-secondary-dark-13: #000000;
    --color-secondary-light-1: #48436b;
    --color-secondary-light-2: #584f82;
    --color-secondary-light-3: #675c98;
    --color-secondary-light-4: #7769af;
    --color-secondary-alpha-10: #38345519;
    --color-secondary-alpha-20: #38345533;
    --color-secondary-alpha-30: #3834554b;
    --color-secondary-alpha-40: #38345566;
    --color-secondary-alpha-50: #38345580;
    --color-secondary-alpha-60: #38345599;
    --color-secondary-alpha-70: #383455b3;
    --color-secondary-alpha-80: #383455cc;
    --color-secondary-alpha-90: #383455e1;
    --color-secondary-button: var(--color-secondary-dark-4);
    --color-secondary-hover: var(--color-secondary-dark-3);
    --color-secondary-active: var(--color-secondary-dark-2);
    /* console colors - used for actions console and console files */
    /* Console colors */
    --color-console-fg: #fff6d5; /* Using your text primary */
    --color-console-fg-subtle: #a7a9be; /* Using your text secondary */
    --color-console-bg: #211f33; /* Using your background darker */
    --color-console-border: #383455; /* Using your background mid */
    --color-console-hover-bg: #ffffff16; /* Kept original alpha hover */
    --color-console-active-bg: #48436b; /* Using your background light */
    --color-console-menu-bg: #1B1A2A; /* Using your background alt */
    --color-console-menu-border: #232136; /* Using your background alt light */

    /* Named base colors */
    --color-red: #e53170; /* Using your error color */
    --color-orange: #e67e22; /* Using your alert color */
    --color-yellow: #f1c40f; /* Using your warning color */
    --color-olive: #2ecc71; /* Using your success color adjusted to be more olive */
    --color-green: #2ecc71; /* Using your success color */
    --color-teal: #00b5b5; /* Derived from your scheme */
    --color-blue: #4a90e2; /* Derived from your scheme */
    --color-violet: #9179e3; /* Derived from your scheme */
    --color-purple: #b86ef2; /* Derived from your scheme */
    --color-pink: #e53170; /* Using your error color */
    --color-brown: #966c4a; /* Derived from your scheme */
    --color-black: #0f0e17; /* Using your background dark */

    /* Light variants (+10% lightness) */
    --color-red-light: #e84680;
    --color-orange-light: #e98d38;
    --color-yellow-light: #f2ca27;
    --color-olive-light: #43d180;
    --color-green-light: #43d180;
    --color-teal-light: #00c9c9;
    --color-blue-light: #619be6;
    --color-violet-light: #a28ae7;
    --color-purple-light: #c182f4;
    --color-pink-light: #e84680;
    --color-brown-light: #a47d5e;
    --color-black-light: #1B1A2A;

    /* Dark 1 variants (-10% lightness) */
    --color-red-dark-1: #d61c60;
    --color-orange-dark-1: #d0711e;
    --color-yellow-dark-1: #d9b10d;
    --color-olive-dark-1: #29b866;
    --color-green-dark-1: #29b866;
    --color-teal-dark-1: #00a3a3;
    --color-blue-dark-1: #3781db;
    --color-violet-dark-1: #7960db;
    --color-purple-dark-1: #aa51ef;
    --color-pink-dark-1: #d61c60;
    --color-brown-dark-1: #855f41;
    --color-black-dark-1: #0a090f;

    /* Dark 2 variants (-20% lightness) */
    --color-red-dark-2: #c01854;
    --color-orange-dark-2: #ba651b;
    --color-yellow-dark-2: #c19d0c;
    --color-olive-dark-2: #25a35a;
    --color-green-dark-2: #25a35a;
    --color-teal-dark-2: #009191;
    --color-blue-dark-2: #2f73cd;
    --color-violet-dark-2: #6847d3;
    --color-purple-dark-2: #9c34ec;
    --color-pink-dark-2: #c01854;
    --color-brown-dark-2: #755339;
    --color-black-dark-2: #060508;
    /* other colors */
    --color-grey: #383455; /* Using your background-mid */
    --color-grey-light: #a7a9be; /* Using your text-secondary */
    --color-gold: #ff8906; /* Using your button-primary */
    --color-white: #fff6d5; /* Using your text-primary */
    
    /* Diff colors - adjusted to match your theme */
    --color-diff-removed-word-bg: #e53170; /* Based on your error color */
    --color-diff-added-word-bg: #2ecc71; /* Based on your success color */
    --color-diff-removed-row-bg: #3c2626;
    --color-diff-moved-row-bg: #383455; /* Using your background-mid */
    --color-diff-added-row-bg: #284034;
    --color-diff-removed-row-border: #e53170; /* Using your error color */
    --color-diff-moved-row-border: #383455; /* Using your background-mid */
    --color-diff-added-row-border: #2ecc71; /* Using your success color */
    --color-diff-inactive: #1B1A2A; /* Using your background-alt */
    
    /* Status colors */
    --color-error-border: #e53170; /* Using your error color */
    --color-error-bg: #3c2626;
    --color-error-bg-active: #522;
    --color-error-bg-hover: #633;
    --color-error-text: #f9cbcb;
    --color-success-border: #2ecc71; /* Using your success color */
    --color-success-bg: #284034;
    --color-success-text: #2ecc71; /* Using your success color */
    --color-warning-border: #f1c40f; /* Using your warning color */
    --color-warning-bg: #3a3a30;
    --color-warning-text: #f1c40f; /* Using your warning color */
    --color-info-border: #4a90e2;
    --color-info-bg: #26354c;
    --color-info-text: #4a90e2;
    
    /* Badge colors */
    --color-red-badge: #e53170; /* Using your error color */
    --color-red-badge-bg: #e531701a;
    --color-red-badge-hover-bg: #e531704d;
    --color-green-badge: #2ecc71; /* Using your success color */
    --color-green-badge-bg: #2ecc711a;
    --color-green-badge-hover-bg: #2ecc714d;
    --color-yellow-badge: #f1c40f; /* Using your warning color */
    --color-yellow-badge-bg: #f1c40f1a;
    --color-yellow-badge-hover-bg: #f1c40f4d;
    --color-orange-badge: #e67e22; /* Using your alert color */
    --color-orange-badge-bg: #e67e221a;
    --color-orange-badge-hover-bg: #e67e224d;
    --color-git: #f25f4c; /* Using your text-accent */
    
    /* Target-based colors */
    --color-body: #0f0e17; /* Using your background-dark */
    --color-box-header: #1B1A2A; /* Using your background-alt */
    --color-box-body: #211f33; /* Using your background-darker */
    --color-box-body-highlight: #232136; /* Using your background-alt-light */
    --color-text-dark: #fff6d5; /* Using your text-primary */
    --color-text: #a7a9be; /* Using your text-secondary */
    --color-text-light: #a7a9be; /* Using your text-secondary */
    --color-text-light-1: #959cab;
    --color-text-light-2: #8a8e99;
    --color-text-light-3: #7f8389;
    --color-footer: #0f0e17; /* Using your background-dark */
    --color-timeline: #383455; /* Using your background-mid */
    --color-input-text: #fff6d5; /* Using your text-primary */
    --color-input-background: #211f33; /* Using your background-darker */
    --color-input-toggle-background: #383455; /* Using your background-mid */
    --color-input-border: var(--color-secondary);
    --color-input-border-hover: var(--color-secondary-dark-1);
    --color-header-wrapper: #0f0e17; /* Using your background-dark */
    --color-header-wrapper-transparent: #0f0e1700;
    --color-light: #00000028;
    --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
    --color-light-border: #ffffff28;
    --color-hover: #ffffff19;
    --color-active: #ffffff24;
    --color-menu: #211f33; /* Using your background-darker */
    --color-card: #211f33; /* Using your background-darker */
    --color-markup-table-row: #ffffff06;
    --color-markup-code-block: #ffffff16;
    --color-button: #211f33; /* Using your background-darker */
    --color-code-bg: #211f33; /* Using your background-darker */
    --color-code-sidebar-bg: #1B1A2A; /* Using your background-alt */
    --color-shadow: #00000060;
    --color-secondary-bg: #232136; /* Using your background-alt-light */
    --color-text-focus: #fff6d5; /* Using your text-primary */
    --color-expand-button: #383455; /* Using your background-mid */
    --color-placeholder-text: #a7a9be; /* Using your text-secondary */
    --color-editor-line-highlight: var(--color-primary-light-5);
    --color-project-board-bg: var(--color-secondary-light-2);
    --color-caret: var(--color-text);
    --color-reaction-bg: #ffffff12;
    --color-reaction-hover-bg: var(--color-primary-light-4);
    --color-reaction-active-bg: var(--color-primary-light-5);
    --color-tooltip-text: #fff6d5; /* Using your text-primary */
    --color-tooltip-bg: #0f0e17f0; /* Using your background-dark */
    --color-nav-bg: #1B1A2A; /* Using your background-alt */
    --color-nav-hover-bg: #232136; /* Using your background-alt-light */
    --color-label-text: #fff6d5; /* Using your text-primary */
    --color-label-bg: #383455; /* Using your background-mid */
    --color-label-hover-bg: #48436b; /* Using your background-light */
    --color-label-active-bg: #48436bff;
    --color-accent: var(--color-primary-light-1);
    --color-small-accent: var(--color-primary-light-5);
    --color-active-line: #383455; /* Using your background-mid */
    accent-color: var(--color-accent);
    color-scheme: dark;
}

/* invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
    filter: invert(100%) hue-rotate(180deg);
}

.home a {
    color: var(--color-primary) !important; /* link and link hover color on home page, other links use --color-primary */
}

.home .svg {
    color: var(--color-primary) !important; /* icons' color on home page */
}

.text.green {
    color: var(--color-primary) !important; /* ssh/gpg key icon color */
}

.ui.green.button {
    background-color: var(--color-primary) !important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */
}

.ui.green.button:hover {
    background-color: var(--color-primary-dark-2) !important; /* "green" button hover color, primary buttons use --color-primary-dark-2 */
}

.ui.basic.green.button {
    color: var(--color-primary) !important; /* reset color as in danger zone */
    border-color: var(--color-primary) !important; /* reset color as in danger zone */
    background-color: unset !important; /* reset color of reopen issue button as in danger zone */
}

.ui.basic.green.button:hover {
    color: var(--color-primary-dark-2) !important; /* reset color as in danger zone */
    border-color: var(--color-primary-dark-2) !important; /* reset color as in danger zone */
    background-color: unset !important; /* reset color of reopen issue button as in danger zone */
}

.ui.red.button {
    background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */
}

.ui.red.button:hover {
    background-color: var(--color-primary-dark-6) !important; /* red button hover color */
}

.ui.basic.red.button {
    background-color: unset !important; /* reset color in danger zone */
}

details {
    background-color: var(--color-secondary-light-2); /* make collapsible elements easier to distinguish from main body */
    border-radius: 4px; /* same as code blocks */
    padding: .2em .4em; /* same as code blocks */
}