/* ============================================================================
 * CloudTide theme for Gitea ("CloudTide Code")
 *
 * Version-controlled at:   .claude/gitea-customizations/theme-cloudtide.css
 * Deploys to server at:    /mnt/gitea-data/gitea/gitea/public/assets/css/theme-cloudtide.css
 *                          (served at /assets/css/theme-cloudtide.css)
 * Activated by app.ini:    [ui] DEFAULT_THEME = cloudtide
 *                          [ui] THEMES = cloudtide,gitea-light,gitea-dark,gitea-auto
 *
 * Brand palette (verified against docs/cloudtide-*.html):
 *   --primary-vivid (#9b51e0)  — visible accent on white (headings, buttons, accents)
 *   --primary-dark  (#7a00df)  — hover/active state, dark text on light-purple chips
 *   --cyan          (#0693e3)
 *   --charcoal      (#32373c)
 *   --purple-soft   (#f3e8ff)  — chip backgrounds
 *   --purple-soft-2 (#fcfaff)  — page tint
 * ============================================================================
 */

/* Inherit Gitea 1.22 light theme as the structural base; we only override
 * what the brand demands. This keeps the file ~150 lines instead of ~2000. */
@import url('theme-gitea-light.css');

:root {
  /* ── Primary brand color tokens ──────────────────────────────────────── */
  --color-primary:          #9b51e0;
  --color-primary-contrast: #ffffff;
  --color-primary-light-1:  #b377e8;
  --color-primary-light-2:  #c89dee;
  --color-primary-light-3:  #d8b8f3;
  --color-primary-light-4:  #e8d4f7;
  --color-primary-light-5:  #f3e8ff;
  --color-primary-light-6:  #f8f0ff;
  --color-primary-light-7:  #fcf5ff;
  --color-primary-dark-1:   #7a00df;
  --color-primary-dark-2:   #6200b3;
  --color-primary-dark-3:   #500091;
  --color-primary-dark-4:   #3d006e;
  --color-primary-dark-5:   #2b004f;
  --color-primary-dark-6:   #190030;
  --color-primary-dark-7:   #0a0014;
  --color-primary-hover:    #7a00df;
  --color-primary-active:   #7a00df;

  /* Secondary accent: cyan */
  --color-secondary:           #0693e3;
  --color-secondary-light-1:   #2aa3e8;
  --color-secondary-light-2:   #4eb3ed;
  --color-secondary-light-3:   #71c3f1;
  --color-secondary-light-4:   #95d3f6;
  --color-secondary-dark-1:    #0578bb;
  --color-secondary-dark-2:    #045d93;

  /* Header bar — charcoal */
  --color-header-bar:     #32373c;
  --color-header-wrapper: #32373c;

  /* Body & page background — soft purple tint instead of stark white */
  --color-body:         #fcfaff;
  --color-page-content: #ffffff;
}

/* ────────────────────────────────────────────────────────────────────────────
 * Login page: replace tiny sidebar logo with a large centered CloudTide mark
 * Selector confirmed in Gitea 1.22: .page-content.user.signin
 * ────────────────────────────────────────────────────────────────────────── */
.page-content.user.signin::before,
.page-content.user.activate::before,
.page-content.user.forgot_password::before,
.page-content.user.recover_account::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 280px;
  height: 160px;
  margin: 8px auto 24px;
  background-image: url('/assets/img/cloudtide-logo-vert.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Optional: tag a marketing line below the logo */
.page-content.user.signin .signin-inner-wrap::before {
  content: 'Preserving the Past, Empowering the Future';
  display: block;
  text-align: center;
  font-style: italic;
  color: var(--color-primary-dark-1);
  font-size: 0.95rem;
  margin: -8px 0 18px;
  opacity: 0.85;
}

/* ────────────────────────────────────────────────────────────────────────────
 * Dashboard hero strip: CloudTide buildings photo with brand-gradient overlay
 * Selector confirmed in Gitea 1.22: .page-content.dashboard.feeds
 * Tone matches the canonical CloudTide hero pattern (see docs/cloudtide-*.html)
 * ────────────────────────────────────────────────────────────────────────── */
.page-content.dashboard.feeds::before {
  content: 'CloudTide Code';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  height: 200px;
  margin: -16px -16px 28px;
  background:
    linear-gradient(135deg, rgba(6, 147, 227, 0.85) 0%, rgba(155, 81, 224, 0.85) 100%),
    url('/assets/img/cloudtide-hero.jpg') center/cover no-repeat;
  background-color: #9b51e0;
  border-bottom: 4px solid #7a00df;
}

/* On wide screens, make the hero a touch taller for impact */
@media (min-width: 1200px) {
  .page-content.dashboard.feeds::before {
    height: 240px;
    font-size: 2.4rem;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * Brand polish (applied site-wide): pill buttons, soft-purple chip pattern
 * ────────────────────────────────────────────────────────────────────────── */

/* Pill-shaped primary buttons per CloudTide convention */
.ui.primary.button,
.ui.basic.primary.button,
.ui.button.primary {
  border-radius: 9999px;
}

/* Footer purple accent line */
.page-footer {
  border-top: 2px solid var(--color-primary);
}

/* Tag/label chips: dark purple text on soft purple background */
.ui.purple.label,
.ui.label.label-primary {
  background-color: #f3e8ff !important;
  color: #7a00df !important;
  border-color: #e9d8fd !important;
}

/* Subtle brand emphasis on repository titles */
.repo-title a:hover,
.repository .header-wrapper .ui.header a:hover {
  color: var(--color-primary-dark-1);
}