@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* =========================================================
   IMPERIAL LIGHT GOLD THEME FOR DEFOLD
   Bright, glossy, luminous, high-contrast royal palette
   Save as: ~/.defold/editor.css
   ========================================================= */

* {
    /* Core luxury palette */
    -vip-black:              #120a03;
    -vip-brown:              #3a2208;
    -vip-panel-dark:         #4c2b09;
    -vip-panel:              #6f4110;
    -vip-panel-light:        #97601b;

    -vip-gold-deep:          #a96b12;
    -vip-gold-dark:          #c9871d;
    -vip-gold:               #e4b23e;
    -vip-gold-bright:        #f3cd6b;
    -vip-gold-light:         #ffe08f;
    -vip-gold-pale:          #ffecb7;
    -vip-gold-ivory:         #fff6db;
    -vip-gold-white:         #fffdf3;

    -vip-text:               #fff9ea;
    -vip-text-soft:          #fff1c8;
    -vip-text-dim:           #edd08a;
    -vip-text-muted:         #c89b45;

    -vip-line:               rgba(255, 240, 200, 0.26);
    -vip-line-strong:        rgba(255, 244, 214, 0.44);
    -vip-shadow:             rgba(70, 38, 6, 0.32);
    -vip-glow:               rgba(255, 220, 120, 0.36);
    -vip-glow-strong:        rgba(255, 235, 170, 0.55);
    -vip-gloss-top:          rgba(255, 255, 245, 0.28);
    -vip-gloss-mid:          rgba(255, 247, 219, 0.12);
    -vip-gloss-low:          rgba(255, 255, 255, 0.04);

    /* Defold palette overrides */
    -df-background-darker:   #2d1805;
    -df-background-dark:     #4c2a09;
    -df-background:          #714213;
    -df-background-lightish: #8f591d;
    -df-background-light:    #aa7126;
    -df-background-lighter:  #c08b35;
    -df-background-input:    #4a2808;

    -df-component-darker:    #8f5917;
    -df-component-dark:      #b37218;
    -df-component:           #d8952a;
    -df-component-light:     #efb84b;
    -df-component-lighter:   #ffdc84;

    -df-component-icon:      #fff0b8;

    -df-text-dark:           #e8c56d;
    -df-text:                #fff3cb;
    -df-text-light:          #fffdf5;
    -df-text-selected:       #ffffff;

    -df-folder:              #ffcf61;
    -df-folder-active:       #ffe59c;
    -df-unknown-file:        #efbf57;
    -df-unknown-file-active: #fff0b8;

    /* JavaFX accents */
    -fx-accent:              -vip-gold-bright;
    -fx-focus-color:         -vip-gold-light;
    -fx-faint-focus-color:   rgba(255, 224, 140, 0.16);
    -fx-selection-bar:       rgba(255, 224, 138, 0.42);
    -fx-selection-bar-non-focused: rgba(255, 224, 138, 0.24);
    -fx-selection-bar-text:  #2a1604;
    -fx-highlight-fill:      rgba(255, 230, 155, 0.46);
    -fx-highlight-text-fill: #2a1604;
}

.root {
    -fx-font-family: "Cormorant Garamond";
    -fx-font-size: 14px;
    -fx-text-fill: -vip-text;
    -fx-background-color:
        linear-gradient(to bottom, #b87a24 0%, #9f651c 10%, #7b4814 32%, #5a320d 62%, #3c2108 100%);
}

/* =========================================================
   Global text
   ========================================================= */

.label,
.text,
.text-flow,
.tree-cell,
.list-cell,
.table-cell,
.tree-table-cell,
.menu-item,
.check-box,
.radio-button,
.hyperlink,
.choice-box,
.combo-box,
.combo-box-base,
.button,
.toggle-button,
.tab .tab-label {
    -fx-text-fill: -vip-text;
}

.menu-bar,
.button,
.toggle-button,
.tab .tab-label,
.dialog-pane > .header-panel .label,
.table-view .column-header .label,
.tree-table-view .column-header .label,
.menu-item > .label {
    -fx-font-family: "Cinzel";
    -fx-font-weight: 700;
    -fx-letter-spacing: 0.5px;
}

/* =========================================================
   Main surfaces
   ========================================================= */

.split-pane,
.scroll-pane,
.scroll-pane > .viewport,
.viewport,
.tool-bar,
.status-bar,
.menu-bar,
.context-menu,
.list-view,
.tree-view,
.tree-table-view,
.table-view,
.tab-pane,
.tab-pane > .tab-content-area,
.accordion,
.dialog-pane,
.titled-pane > .content {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,245,0.12) 0%,
            rgba(255,241,211,0.06) 8%,
            rgba(202,138,34,1.0) 9%,
            rgba(150,92,24,1.0) 36%,
            rgba(108,61,16,1.0) 68%,
            rgba(63,35,8,1.0) 100%);
    -fx-border-color: -vip-line;
}

/* =========================================================
   Menu bar / top chrome
   ========================================================= */

.menu-bar {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.38) 0%,
            rgba(255,249,228,0.24) 8%,
            rgba(255,223,131,1.0) 9%,
            rgba(240,183,71,1.0) 26%,
            rgba(193,120,25,1.0) 52%,
            rgba(104,59,14,1.0) 100%);
    -fx-border-color: rgba(255, 247, 220, 0.34);
    -fx-border-width: 0 0 1 0;
    -fx-effect: dropshadow(gaussian, rgba(255, 220, 120, 0.28), 16, 0.36, 0, 2);
}

.menu-bar .label,
.menu-button .label,
.context-menu .label {
    -fx-text-fill: -vip-gold-white;
}

.context-menu {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,245,0.14) 0%,
            rgba(255,236,191,0.08) 8%,
            #d1922d 9%,
            #925718 40%,
            #542f0d 100%);
    -fx-background-radius: 12;
    -fx-border-color: rgba(255, 238, 194, 0.28);
    -fx-border-radius: 12;
}

.menu-item {
    -fx-background-color: transparent;
}

.menu-item:focused,
.menu-item:hover {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.20),
            rgba(255,243,198,0.10)),
        linear-gradient(to bottom, #ffe38f 0%, #f0b84b 45%, #9b601a 100%);
    -fx-text-fill: -vip-gold-white;
}

/* =========================================================
   Tabs: Assets / Outline / Properties / editors
   ========================================================= */

.tab-pane > .tab-header-area,
.tab-pane > .tab-header-area > .headers-region,
.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.26) 0%,
            rgba(255,244,213,0.14) 7%,
            #efba4d 8%,
            #b06e1e 34%,
            #6a3c10 100%);
    -fx-border-color: rgba(255, 242, 203, 0.24);
}

.tab-pane > .tab-header-area {
    -fx-padding: 6 8 0 8;
}

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.30) 0%,
            rgba(255,247,227,0.14) 10%,
            rgba(245,197,94,1.0) 11%,
            rgba(189,118,27,1.0) 44%,
            rgba(101,57,14,1.0) 100%);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 14 14 0 0, 13 13 0 0;
    -fx-border-color: rgba(255, 244, 214, 0.22);
    -fx-border-width: 1 1 0 1;
    -fx-border-radius: 14 14 0 0;
    -fx-padding: 7 15 7 15;
}

.tab-pane > .tab-header-area > .headers-region > .tab .tab-label {
    -fx-text-fill: #fff5d9;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.46) 0%,
            rgba(255,251,236,0.24) 10%,
            rgba(255,230,144,1.0) 11%,
            rgba(245,190,73,1.0) 32%,
            rgba(209,139,35,1.0) 56%,
            rgba(120,71,18,1.0) 100%);
    -fx-border-color: rgba(255, 248, 225, 0.44);
    -fx-effect: dropshadow(gaussian, rgba(255, 228, 150, 0.22), 10, 0.32, 0, 1);
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected .tab-label {
    -fx-text-fill: #ffffff;
}

/* =========================================================
   Panels / titled panes / section headers
   ========================================================= */

.titled-pane > .title,
.accordion > .titled-pane > .title {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.28) 0%,
            rgba(255,248,228,0.14) 9%,
            #f0ba4d 10%,
            #b06f1f 42%,
            #60360d 100%);
    -fx-border-color: rgba(255, 242, 203, 0.24);
}

.titled-pane > .title > .text,
.titled-pane > .title .label,
.cljfx-form-title {
    -fx-text-fill: #fff7e2;
}

/* =========================================================
   Lists / trees / tables / property grids
   ========================================================= */

.tree-view,
.tree-table-view,
.table-view,
.list-view {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,245,0.12) 0%,
            rgba(255,243,214,0.05) 8%,
            #b16f1f 9%,
            #754515 45%,
            #472809 100%);
    -fx-border-color: rgba(255, 233, 178, 0.18);
    -fx-background-radius: 9;
    -fx-border-radius: 9;
}

.tree-cell,
.tree-table-cell,
.table-cell,
.list-cell,
.table-row-cell,
.tree-table-row-cell {
    -fx-background-color: transparent;
    -fx-text-fill: #fff5d8;
}

.tree-cell:filled:selected,
.list-cell:filled:selected,
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:selected .table-cell,
.tree-table-row-cell:selected .tree-table-cell {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.26) 0%,
            rgba(255,247,221,0.12) 8%,
            rgba(255,225,137,1.0) 9%,
            rgba(228,168,56,1.0) 52%,
            rgba(154,91,20,1.0) 100%);
    -fx-text-fill: #ffffff;
}

.tree-cell:filled:hover,
.list-cell:filled:hover,
.table-row-cell:hover,
.tree-table-row-cell:hover {
    -fx-background-color: rgba(255, 227, 146, 0.12);
}

.table-view .column-header-background,
.tree-table-view .column-header-background {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.22) 0%,
            rgba(255,247,225,0.10) 8%,
            #f1be53 9%,
            #aa6920 42%,
            #5b330d 100%);
}

.table-view .column-header,
.tree-table-view .column-header,
.table-view .filler,
.tree-table-view .filler {
    -fx-background-color: transparent;
    -fx-border-color: rgba(255, 237, 191, 0.14);
}

.table-view .column-header .label,
.tree-table-view .column-header .label {
    -fx-text-fill: #fff9ea;
}

/* =========================================================
   Buttons
   ========================================================= */

.button,
.toggle-button,
.combo-box-base,
.choice-box {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.42) 0%,
            rgba(255,251,236,0.22) 8%,
            rgba(255,231,145,1.0) 9%,
            rgba(244,189,75,1.0) 30%,
            rgba(214,144,37,1.0) 58%,
            rgba(122,71,18,1.0) 100%);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 13, 12;
    -fx-border-color: rgba(255, 248, 225, 0.52);
    -fx-border-radius: 13;
    -fx-border-width: 1;
    -fx-text-fill: #fffdf5;
    -fx-padding: 7 14 7 14;
    -fx-effect: dropshadow(gaussian, rgba(255, 227, 145, 0.34), 14, 0.38, 0, 2);
}

.button:hover,
.toggle-button:hover,
.combo-box-base:hover,
.choice-box:hover {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.54) 0%,
            rgba(255,252,241,0.28) 8%,
            rgba(255,239,171,1.0) 9%,
            rgba(255,205,95,1.0) 30%,
            rgba(236,164,48,1.0) 58%,
            rgba(144,85,22,1.0) 100%);
    -fx-border-color: rgba(255, 252, 237, 0.68);
    -fx-text-fill: #ffffff;
    -fx-effect: dropshadow(gaussian, rgba(255, 233, 162, 0.44), 18, 0.40, 0, 2);
}

.button:pressed,
.toggle-button:selected,
.toggle-button:pressed {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.24) 0%,
            rgba(255,248,226,0.10) 8%,
            rgba(242,188,77,1.0) 9%,
            rgba(202,132,31,1.0) 42%,
            rgba(102,60,15,1.0) 100%);
    -fx-border-color: rgba(255, 241, 203, 0.42);
    -fx-text-fill: #fff9ea;
}

/* =========================================================
   Inputs / editors / property fields
   ========================================================= */

.text-field,
.text-area,
.password-field,
.spinner,
.spinner .text-field {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.22) 0%,
            rgba(255,249,230,0.09) 8%,
            rgba(216,149,42,1.0) 9%,
            rgba(138,84,22,1.0) 40%,
            rgba(76,43,10,1.0) 100%);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 10, 9;
    -fx-border-color: rgba(255, 240, 200, 0.32);
    -fx-border-radius: 10;
    -fx-border-width: 1;
    -fx-text-fill: #fff9e7;
    -fx-prompt-text-fill: rgba(255, 238, 196, 0.48);
    -fx-highlight-fill: rgba(255, 232, 162, 0.50);
    -fx-highlight-text-fill: #2a1604;
}

.text-field:focused,
.text-area:focused,
.password-field:focused,
.spinner:focused,
.combo-box-base:focused,
.choice-box:focused {
    -fx-border-color: rgba(255, 244, 214, 0.70);
    -fx-effect: dropshadow(gaussian, rgba(255, 232, 162, 0.28), 14, 0.36, 0, 0);
}

.combo-box-base,
.choice-box {
    -fx-text-fill: #fffdf4;
}

.combo-box-popup > .list-view,
.choice-box > .context-menu,
.context-menu {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.18) 0%,
            rgba(255,247,221,0.08) 8%,
            #de9d35 9%,
            #8b5318 42%,
            #4c2b0b 100%);
    -fx-border-color: rgba(255, 239, 201, 0.30);
    -fx-border-radius: 11;
    -fx-background-radius: 11;
}

.combo-box-popup > .list-view .list-cell,
.choice-box > .context-menu .menu-item,
.context-menu .menu-item {
    -fx-background-color: transparent;
    -fx-text-fill: #fff5da;
}

.combo-box-popup > .list-view .list-cell:filled:hover,
.combo-box-popup > .list-view .list-cell:filled:selected,
.choice-box > .context-menu .menu-item:focused,
.choice-box > .context-menu .menu-item:hover,
.context-menu .menu-item:focused,
.context-menu .menu-item:hover {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.26),
            rgba(255,247,221,0.10)),
        linear-gradient(to bottom, #ffe28f 0%, #f0bb4d 50%, #98601d 100%);
    -fx-text-fill: #ffffff;
}

/* =========================================================
   Scrollbars / splitters
   ========================================================= */

.split-pane > .split-pane-divider {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.18) 0%,
            rgba(255,237,196,0.08) 8%,
            rgba(228,168,56,1.0) 9%,
            rgba(126,74,18,1.0) 100%);
}

.scroll-bar {
    -fx-background-color: transparent;
}

.scroll-bar .track {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.10) 0%,
            rgba(255,245,213,0.04) 8%,
            #a76920 9%,
            #663a11 100%);
    -fx-background-radius: 999;
    -fx-border-color: rgba(255, 235, 184, 0.10);
    -fx-border-radius: 999;
}

.scroll-bar .thumb {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.34) 0%,
            rgba(255,250,236,0.14) 8%,
            #ffe28f 9%,
            #f0bb4d 28%,
            #d48f29 62%,
            #8b5318 100%);
    -fx-background-radius: 999;
    -fx-effect: dropshadow(gaussian, rgba(255, 227, 145, 0.30), 8, 0.32, 0, 1);
}

.scroll-bar .thumb:hover {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.44) 0%,
            rgba(255,252,241,0.18) 8%,
            #ffefb3 9%,
            #ffd164 28%,
            #eaab3c 62%,
            #9f621d 100%);
}

/* =========================================================
   Tooltip / dialogs
   ========================================================= */

.tooltip {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.20) 0%,
            rgba(255,247,221,0.10) 8%,
            #d99732 9%,
            #8a5318 42%,
            #4c2a0a 100%);
    -fx-background-radius: 11;
    -fx-border-color: rgba(255, 239, 201, 0.30);
    -fx-border-radius: 11;
    -fx-text-fill: #fff9ea;
    -fx-font-family: "Cormorant Garamond";
    -fx-font-size: 13px;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.30), 16, 0.35, 0, 2);
}

.dialog-pane {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.16) 0%,
            rgba(255,247,221,0.08) 8%,
            #c88427 9%,
            #7f4a15 42%,
            #432509 100%);
    -fx-border-color: rgba(255, 239, 201, 0.32);
    -fx-border-radius: 14;
    -fx-background-radius: 14;
}

.dialog-pane > .header-panel {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.46) 0%,
            rgba(255,252,239,0.24) 8%,
            #ffe28f 9%,
            #f1bf53 28%,
            #d48f29 58%,
            #8e5518 100%);
    -fx-background-radius: 14 14 0 0;
}

.dialog-pane > .header-panel .label {
    -fx-text-fill: #ffffff;
    -fx-font-size: 17px;
}

/* =========================================================
   Checkboxes / radios / links
   ========================================================= */

.check-box .box,
.radio-button .radio {
    -fx-background-color:
        linear-gradient(to bottom,
            rgba(255,255,255,0.18) 0%,
            rgba(255,248,225,0.08) 8%,
            #cf8c2d 9%,
            #7b4815 42%,
            #432509 100%);
    -fx-border-color: rgba(255, 241, 203, 0.38);
    -fx-border-radius: 6;
    -fx-background-radius: 6;
}

.check-box:selected .mark,
.radio-button:selected .dot {
    -fx-background-color: -vip-gold-white;
}

.hyperlink {
    -fx-text-fill: #fff0b8;
    -fx-border-color: transparent;
}

.hyperlink:hover {
    -fx-text-fill: #ffffff;
}

/* =========================================================
   Icons / arrows / glyph-like shapes
   ========================================================= */

.shape,
.button .shape,
.toggle-button .shape,
.menu-button .shape,
.tab .shape,
.tree-cell .shape,
.tree-table-cell .shape,
.table-cell .shape,
.label .shape,
.combo-box-base .arrow,
.choice-box .open-button .arrow,
.spinner .increment-arrow,
.spinner .decrement-arrow {
    -fx-background-color: #fff0b8;
}

.button:hover .shape,
.toggle-button:hover .shape,
.tab:selected .shape,
.tree-cell:selected .shape,
.tree-table-row-cell:selected .shape,
.table-row-cell:selected .shape {
    -fx-background-color: #ffffff;
}

/* =========================================================
   Focus
   ========================================================= */

*:focused {
    -fx-focus-color: -vip-gold-light;
    -fx-faint-focus-color: rgba(255, 225, 130, 0.14);
}