/* skui-light.css  light theme override
   imports the dark base and overrides all variables
   cool neutral gray palette  no yellow/warm cast */

@import url('../skui.css');

:root {
  /* backgrounds  neutral cool-gray hierarchy */
  --bg-void:        hsl(220, 3%,  67%);    /* darkest  list bg top */
  --bg-deep:        hsl(220, 2%,  73%);    /* deep insets, code bg */
  --bg-base:        hsl(220, 2%,  83%);    /* main page bg */
  --bg-raised:      hsl(220, 2%,  88%);    /* cell / panel */
  --bg-float:       hsl(215, 2%,  91%);    /* floating surfaces */
  --bg-hover:       hsl(210, 3%,  95%);    /* hover state */

  /* surfaces  gradient pairs (top, bottom) */
  --surf-t:         hsl(220, 2%,  91%);    /* panel top */
  --surf-b:         hsl(220, 3%,  77%);    /* panel bottom  cooler mid */
  --surf-btn-t:     hsl(210, 3%,  96%);    /* button hover top */
  --surf-btn-b:     hsl(220, 3%,  64%);    /* button rest */

  /* text  dark on light, neutral (no warm cast) */
  --text-primary:   #191a1c;
  --text-secondary: #38393d;
  --text-muted:     #64666e;
  --text-inverse:   #ffffff;
  --text-link:      #1e4f8c;

  /* accent  blue (slightly deeper for contrast on light bg) */
  --blue-t:         #3a6aaa;
  --blue-b:         #2a5090;
  --blue-lit:       #4a7abc;
  --blue-dim:       #1a3870;

  /* gold  same, reads well on light */
  --secondary-t:         #c89030;
  --secondary-b:         #9a6c14;
  --secondary-lit:       #e0a828;
  --secondary-glow:      rgba(180, 130, 20, 0.2);

  /* semantic  slightly deeper for contrast */
  --danger-t:       #b83030;
  --danger-b:       #8c1e1e;
  --success-t:      #2e8858;
  --success-b:      #1e6040;
  --warn-t:         #b87018;
  --warn-b:         #8a500c;

  /* borders  flipped for light bg
     border-hi = bright highlight (visible on warm gray)
     border-lo = dark shadow line */
  --border-hi:      rgba(255, 255, 255, 0.55);
  --border-lo:      rgba(0,   0,   0,   0.22);
  --border-mid:     rgba(0,   0,   0,   0.12);

  /* shadows  much lighter on light bg */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.15), 0 1px 0 rgba(0,0,0,0.08);
  --shadow-md:      0 3px 10px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10);
  --shadow-lg:      0 8px 30px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.14);
  --shadow-inset:   inset 0 2px 5px rgba(0,0,0,0.10), inset 0 1px 0 rgba(0,0,0,0.06);

  /* bevel  light theme inverts the bevel logic
     top edge is bright (lit from above), bottom is darker */
  --bevel-hi:       inset 0 1px 0 rgba(255,255,255,0.65);
  --bevel-lo:       inset 0 -1px 0 rgba(0,0,0,0.14);
}

/* body bg  cool neutral gray page with subtle gradient */
body {
  background-color: var(--bg-base);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1' fill='rgba(100,115,148,0.10)'/%3E%3Ccircle cx='0' cy='0' r='0.6' fill='rgba(100,115,148,0.07)'/%3E%3Ccircle cx='22' cy='0' r='0.6' fill='rgba(100,115,148,0.07)'/%3E%3Ccircle cx='0' cy='22' r='0.6' fill='rgba(100,115,148,0.07)'/%3E%3Ccircle cx='22' cy='22' r='0.6' fill='rgba(100,115,148,0.07)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(180,188,200,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 100%, rgba(170,178,192,0.16) 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--text-primary);
}

/* noise stays, just slightly more visible on light bg */
body::before {
  opacity: 0.04;
}

/* code / pre  warm inset instead of dark */
code {
  background: var(--bg-deep);
  color: #2a3a5a;
  border-color: var(--border-lo);
}

pre {
  background: var(--bg-deep);
  color: #2a3a5a;
  border-color: var(--border-lo);
}

/* blockquote accent  gold border reads well on light */
blockquote {
  background: linear-gradient(90deg, rgba(160,100,10,0.06) 0%, transparent 100%);
}

/* hr  darker line on light bg */
hr {
  border-top-color: var(--border-lo);
  box-shadow: 0 1px 0 var(--border-hi);
}

/* mark  gold highlight more subdued on light */
mark {
  background: rgba(180, 120, 10, 0.2);
  color: hsl(35, 80%, 30%);
}

/* kbd  use light button surface */
kbd {
  background: linear-gradient(180deg, var(--surf-t) 0%, var(--surf-b) 100%);
  color: var(--text-secondary);
  border-color: var(--border-lo);
  box-shadow: var(--bevel-hi), var(--bevel-lo), 0 2px 0 var(--border-lo);
}

/* buttons  primary / brand retain white text but need
   adjusted shadow for light bg (drop shadow less opaque) */
.btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 5px rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.18);
}

.btn--secondary {
  box-shadow:
    inset 0 1px 0 rgba(255,220,80,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 2px 5px rgba(0,0,0,0.22),
    0 0 7px var(--secondary-glow);
}

.btn--danger {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 5px rgba(0,0,0,0.22);
}

.btn--success {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 5px rgba(0,0,0,0.22);
}

/* ghost btn on light bg  needs darker text */
.btn--ghost {
  color: var(--text-secondary);
}

.btn--ghost:hover {
  color: var(--text-primary);
}

/* input  inset well is deeper beige */
.input {
  background: var(--bg-deep);
  color: var(--text-primary);
  border-color: var(--border-lo);
}

.input::placeholder { color: var(--text-muted); }

.input:focus {
  border-color: var(--blue-b);
  box-shadow: var(--shadow-inset), 0 0 0 2px rgba(42, 80, 144, 0.2);
}

/* select */
.select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233d3b38' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--surf-t) 0%, var(--surf-b) 100%);
  color: var(--text-primary);
}

/* scrollbar  warm gray */
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--surf-t) 0%, var(--surf-b) 100%);
  border-color: var(--border-lo);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-float) 100%);
}

/* tooltip  darker on light bg for contrast */
[data-tooltip]::after {
  background: linear-gradient(180deg, var(--text-secondary) 0%, #2a2826 100%);
  color: #f0ede8;
  border-color: rgba(0,0,0,0.4);
  box-shadow: var(--bevel-hi), var(--shadow-md);
}

/* progress fill  darker brand for contrast */
.progress__fill {
  background: linear-gradient(90deg, var(--blue-b), var(--blue-t));
  box-shadow: 0 0 4px rgba(42,80,144,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}

.progress__fill--gold {
  background: linear-gradient(90deg, var(--secondary-b), var(--secondary-t));
  box-shadow: 0 0 4px var(--secondary-glow), inset 0 1px 0 rgba(255,220,80,0.3);
}

.progress__fill--success {
  background: linear-gradient(90deg, var(--success-b), var(--success-t));
  box-shadow: 0 0 4px rgba(30,96,64,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* menu  warm surface */
.menu {
  background: linear-gradient(180deg, var(--bg-float) 0%, var(--bg-raised) 100%);
}

.menu-item { color: var(--text-secondary); }

.menu-item--danger { color: var(--danger-b); }

/* modal */
.modal {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    var(--shadow-lg),
    0 0 0 1px rgba(0,0,0,0.12);
}

/* alert  adjust left border for visibility on light bg */
.alert--info    { border-left-color: var(--blue-b);    }
.alert--warn    { border-left-color: var(--warn-b);    }
.alert--danger  { border-left-color: var(--danger-b);  }
.alert--success { border-left-color: var(--success-b); }
.alert--secondary    { border-left-color: var(--secondary-b);    }

/* message mention  warm amber tint on light bg */
.message--mention {
  background: linear-gradient(90deg, rgba(160,100,10,0.06) 0%, rgba(160,100,10,0.02) 100%);
  border-left-color: var(--secondary-b);
}

/* tab active underline  readable on warm bg */
.tab--active::after {
  background: linear-gradient(90deg, var(--blue-b), var(--blue-t));
  box-shadow: 0 0 5px rgba(42,80,144,0.4);
}

.tab--active-secondary::after {
  background: linear-gradient(90deg, var(--secondary-b), var(--secondary-t));
  box-shadow: 0 0 5px var(--secondary-glow);
}

/* list item active on light bg */
.list-item--active {
  background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-float) 100%);
}

/* divider */
.divider::before,
.divider::after {
  background: var(--border-lo);
  box-shadow: 0 1px 0 var(--border-hi);
}

/* table row alternating on light bg */
tbody tr:nth-child(even) {
  background: var(--bg-float);
}

tbody tr:nth-child(even):hover,
tbody tr:hover {
  background: var(--bg-hover);
}