/*
 * Olimpo "planet.xprs.es" — recolors Homepage's stock `teal` palette to
 * match the Loki Saffron brand (iris/docs/brand/saffron/styles/brand.css):
 * teal brand (#008080) + Myanmar Saffron accent (#FECB00). Homepage reads
 * its palette from the `--color-50`..`--color-900` custom properties set
 * per `.theme-<name>` class (src/styles/theme.css) — override them here
 * instead of fighting the compiled Tailwind utility classes directly.
 */

.theme-teal {
  --color-50: 230 245 245;   /* brand-soft  #e6f5f5 */
  --color-100: 214 239 239;  /* brand-surface #d6efef */
  --color-200: 184 212 212;  /* brand-line  #b8d4d4 */
  --color-300: 143 196 196;
  --color-400: 77 175 175;
  --color-500: 0 153 153;    /* brand-mid   #009999 */
  --color-600: 0 128 128;    /* brand       #008080 */
  --color-700: 0 102 102;
  --color-800: 0 77 77;      /* brand-dark  #004d4d */
  --color-900: 26 46 46;     /* brand-ink   #1a2e2e */

  --color-logo-start: 0 128 128 / 20%;
  --color-logo-stop: 254 203 0 / 15%; /* saffron accent glow */
}

/* Light-mode canvas: same soft teal/saffron radial wash as the Roundcube
   brand's login screen, instead of a flat theme color. */
.light #background {
  background:
    radial-gradient(circle at top left, rgba(0, 128, 128, 0.16), transparent 42%),
    radial-gradient(circle at bottom right, rgba(254, 203, 0, 0.1), transparent 38%),
    linear-gradient(160deg, #e6f5f5 0%, #d6efef 45%, #eef8f8 100%);
}

.dark #background {
  background:
    radial-gradient(circle at top left, rgba(0, 153, 153, 0.22), transparent 42%),
    radial-gradient(circle at bottom right, rgba(254, 203, 0, 0.08), transparent 40%),
    #1a2e2e;
}

/* Saffron accent on the group title's left edge, same cue brand.css uses
   for unread/selected rows (inset accent bar) rather than a plain heading. */
.service-group-name {
  padding-left: 0.6rem;
  border-left: 3px solid #fecb00;
}

/* Saffron focus/hover ring on cards, matching brand.css's .btn-primary /
   form-control focus treatment (brand-glow box-shadow + accent cue). */
.service-card {
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.service-card:hover,
.service-card:focus-within {
  box-shadow: 0 0 0 0.15rem rgba(254, 203, 0, 0.45);
  transform: translateY(-1px);
}

.service-name {
  font-weight: 600;
}