/* theme-sunbeam.css — O Estúdio theme for Gitea
 * Dark navy background + amber/honey primary, Ysabeau + Monaspace Neon.
 * Based on cunningham.ts estudioTheme from people/desk.
 */

/* ── Base: inherit all gitea-dark variables, then override ─── */
@import url("/assets/css/theme-gitea-dark.css");

/* ── Font imports ──────────────────────────────────────────── */

/* Ysabeau Variable (UI font) — from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ysabeau:ital,wght@0,1..1000;1,1..1000&display=swap');

/* Monaspace Neon Variable (code font) — from jsDelivr */
@font-face {
  font-family: 'Monaspace Neon';
  src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.101/fonts/webfonts/MonaspaceNeonVarVF%5Bwght%2Cwdth%2Cslnt%5D.woff2') format('woff2');
  font-weight: 200 800;
  font-style: oblique 0deg 10deg;
  font-display: swap;
}

/* ── Typography ─────────────────────────────────────────────── */

:root {
  --fonts-regular:      'Ysabeau', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --fonts-proportional: 'Ysabeau', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --fonts-monospace:    'Monaspace Neon', ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

html, body {
  font-size: 15px;
  font-weight: 450;
}

/* Monaspace OpenType features: texture healing + stylistic sets + ligatures */
pre, code, kbd, samp,
.diff-code-inner, .markup-block-diff,
[class*="cm-"], .CodeMirror {
  font-feature-settings: "calt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1,
                         "ss05" 1, "ss06" 1, "ss07" 1, "ss08" 1, "liga" 1;
}

/* ── O Estúdio dark navy background ─────────────────────────── */
/* Greyscale from cunningham estudioTheme — inverted dark scale  */
/* Variable names verified against gitea-dark.css source         */

:root {
  /* Page + nav */
  --color-body:                    #0c1a2b; /* greyscale-000 */
  --color-nav-bg:                  #182536; /* greyscale-100 */
  --color-nav-hover-bg:            #303c4b; /* greyscale-200 */
  --color-secondary-nav-bg:        #182536; /* greyscale-100 */

  /* Boxes / cards */
  --color-box-header:              #182536; /* greyscale-100 */
  --color-box-body:                #0c1a2b; /* greyscale-000 */
  --color-box-body-highlight:      #303c4b; /* greyscale-200 */
  --color-card:                    #182536; /* greyscale-100 */
  --color-menu:                    #182536; /* greyscale-100 */
  --color-button:                  #182536; /* greyscale-100 */
  --color-expand-button:           #303c4b; /* greyscale-200 */

  /* Inputs / code */
  --color-input-background:        #182536; /* greyscale-100 */
  --color-input-toggle-background: #303c4b; /* greyscale-200 */
  --color-code-bg:                 #0c1a2b; /* greyscale-000 */
  --color-secondary-bg:            #303c4b; /* greyscale-200 */

  /* Console (Actions log, SSH, etc.) */
  --color-console-bg:              #0c1a2b; /* greyscale-000 */
  --color-console-border:          #303c4b; /* greyscale-200 */
  --color-console-hover-bg:        #182536; /* greyscale-100 */
  --color-console-active-bg:       #303c4b; /* greyscale-200 */
  --color-console-menu-bg:         #182536; /* greyscale-100 */
  --color-console-menu-border:     #555f6b; /* greyscale-300 */

  /* UI chrome */
  --color-hover-opaque:            #303c4b; /* greyscale-200 */
  --color-timeline:                #303c4b; /* greyscale-200 */
  --color-grey:                    #555f6b; /* greyscale-300 */
  --color-shadow-opaque:           #07111c;

  /* Borders */
  --color-input-border:            #303c4b; /* greyscale-200 */
  --color-light-border:            #182536; /* greyscale-100 */

  /* Secondary scale — full 13-dark / 4-light spectrum */
  --color-secondary:               #182536; /* greyscale-100 */
  --color-secondary-dark-1:        #0c1a2b; /* greyscale-000 */
  --color-secondary-dark-2:        #07111c;
  --color-secondary-dark-3:        #040b12;
  --color-secondary-dark-4:        #020609;
  --color-secondary-dark-5:        #010406;
  --color-secondary-dark-6:        #000203;
  --color-secondary-dark-7:        #000000;
  --color-secondary-dark-8:        #000000;
  --color-secondary-dark-9:        #000000;
  --color-secondary-dark-10:       #000000;
  --color-secondary-dark-11:       #000000;
  --color-secondary-dark-12:       #000000;
  --color-secondary-dark-13:       #000000;
  --color-secondary-light-1:       #303c4b; /* greyscale-200 */
  --color-secondary-light-2:       #555f6b; /* greyscale-300 */
  --color-secondary-light-3:       #79818a; /* greyscale-400 */
  --color-secondary-light-4:       #9ea3aa; /* greyscale-500 */

  /* Text */
  --color-text:                    #e7e8ea; /* greyscale-700 */
  --color-text-dark:               #fafafb; /* greyscale-900 */
  --color-text-light:              #c2c6ca; /* greyscale-600 */
  --color-text-light-1:            #9ea3aa; /* greyscale-500 */
  --color-text-light-2:            #79818a; /* greyscale-400 */
  --color-text-light-3:            #555f6b; /* greyscale-300 */
}

/* ── O Estúdio amber/honey primary ──────────────────────────── */
/* Amber palette from cunningham estudioTheme                    */

:root {
  --color-primary:          #f59e0b; /* primary-500 */
  --color-primary-dark-1:   #d97706; /* primary-600 */
  --color-primary-dark-2:   #b45309; /* primary-700 */
  --color-primary-dark-3:   #92400e; /* primary-800 */
  --color-primary-dark-4:   #78350f; /* primary-900 */
  --color-primary-dark-5:   #5c2808;
  --color-primary-dark-6:   #3e1a04;
  --color-primary-dark-7:   #1c0d00;
  --color-primary-light-1:  #fbbf24; /* primary-400 */
  --color-primary-light-2:  #fcd34d; /* primary-300 */
  --color-primary-light-3:  #fde68a; /* primary-200 */
  --color-primary-light-4:  #fde9a0; /* primary-150 */
  --color-primary-light-5:  #fef3c7; /* primary-100 */
  --color-primary-light-6:  #fffbeb; /* primary-050 */
  --color-primary-light-7:  #fffef5;

  --color-primary-hover:    #d97706; /* primary-600 */
  --color-primary-active:   #b45309; /* primary-700 */
  /* Amber is bright — use warm dark for contrast text */
  --color-primary-contrast: #1c1917; /* primary-bg */

  /* primary-500 = rgb(245, 158, 11) */
  --color-primary-alpha-10: rgba(245, 158, 11, 0.10);
  --color-primary-alpha-20: rgba(245, 158, 11, 0.20);
  --color-primary-alpha-30: rgba(245, 158, 11, 0.30);
  --color-primary-alpha-40: rgba(245, 158, 11, 0.40);
  --color-primary-alpha-50: rgba(245, 158, 11, 0.50);
  --color-primary-alpha-60: rgba(245, 158, 11, 0.60);
  --color-primary-alpha-70: rgba(245, 158, 11, 0.70);
  --color-primary-alpha-80: rgba(245, 158, 11, 0.80);
  --color-primary-alpha-90: rgba(245, 158, 11, 0.90);

  /* Accent variables used by Gitea for highlights + native browser accent */
  --color-accent:            #fbbf24; /* primary-400 */
  --color-small-accent:      #fef3c7; /* primary-100 */
  --color-highlight-fg:      #87651e;
  --color-highlight-bg:      #352c1c;
  --color-reaction-hover-bg: rgba(245, 158, 11, 0.20);
  --color-reaction-active-bg: rgba(245, 158, 11, 0.30);
  accent-color: #f59e0b;
}

/* ── Explicit amber overrides (belt-and-suspenders) ──────────── */
/* Belt-and-suspenders rules for elements that must be amber on   */
/* every page, in case CSS variable resolution has any gaps.      */

/* Primary buttons */
.ui.primary.button,
.ui.primary.buttons .button {
  background: #f59e0b !important;
  color: #1c1917 !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: #d97706 !important;
}
.ui.primary.button:active,
.ui.primary.buttons .button:active {
  background: #b45309 !important;
}
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
  color: #f59e0b !important;
  border-color: #f59e0b !important;
  background: none !important;
}

/* Links */
a { color: #f59e0b; }
a:hover { color: #d97706; }

/* Active nav/tab items and underlines */
.ui.secondary.menu .active.item,
.ui.tabular.menu .active.item,
.menu .active.item {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}
.repository .file-list .item.selected,
.ui.menu .active.item:hover {
  color: #f59e0b !important;
}

/* Active border on bottom of tabs */
.ui.pointing.secondary.menu .active.item,
.ui.pointing.secondary.menu .active.item:hover {
  border-bottom-color: #f59e0b !important;
}

/* Labels and badges using primary */
.ui.label.primary, .ui.labels.primary .label {
  background: #f59e0b !important;
  color: #1c1917 !important;
}

/* Gitea logo — inline SVG fallback (1.25+ uses <img>, see logo.svg mount) */
.gitea-logo, svg.gitea-logo path { fill: #f59e0b !important; }

/* ── Dark overrides for Fomantic UI message components ───────── */
/* index.css uses hardcoded light-theme hex values for these;     */
/* they must be overridden explicitly — CSS vars don't reach them. */

.ui.message {
  background: var(--color-secondary) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}
.ui.warning.message,
.ui.yellow.message {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning-text) !important;
  border-color: var(--color-warning-border) !important;
}
.ui.warning.message .header,
.ui.yellow.message .header {
  color: var(--color-warning-text) !important;
}
.ui.negative.message,
.ui.error.message,
.ui.red.message {
  background: var(--color-error-bg) !important;
  color: var(--color-error-text) !important;
  border-color: var(--color-error-border) !important;
}
.ui.negative.message .header,
.ui.error.message .header {
  color: var(--color-error-text) !important;
}
.ui.positive.message,
.ui.success.message,
.ui.green.message {
  background: var(--color-success-bg) !important;
  color: var(--color-success-text) !important;
  border-color: var(--color-success-border) !important;
}
.ui.info.message,
.ui.teal.message,
.ui.blue.message {
  background: var(--color-info-bg) !important;
  color: var(--color-info-text) !important;
  border-color: var(--color-info-border) !important;
}

/* Dropdown warning state (also hardcoded in index.css) */
.ui.selection.dropdown.warning {
  background: var(--color-input-background) !important;
  border-color: var(--color-warning-border) !important;
  color: var(--color-text) !important;
}