/*
  Theme
  Colors drawn from the actual Jesus Tribe and TCN brand assets.
  Light and dark mode are both first class, switched by a data attribute
  on the html element rather than relying on the operating system alone.
*/

:root {
  /* Base */
  --color-bg: #F7F3EC;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FCFAF6;
  --color-text: #0E0E0F;
  --color-text-muted: #55534E;
  --color-border: #E4DFD3;

  /* Brand */
  --color-primary: #0E0E0F;
  --color-accent: #D9541F;
  --color-accent-hover: #C24A19;
  --color-gold: #C9A227;
  --color-sage: #7A9B76;
  --color-ember: #C1432F;

  /* Brand constants, never flip with theme. Used for objects meant to
     look like physical items (the Camper Card) regardless of mode. */
  --brand-ink: #0E0E0F;
  --brand-ink-text: #F7F3EC;

  /* States */
  --color-success: #7A9B76;
  --color-warning: #C9A227;
  --color-danger: #C1432F;

  /* Surfaces for status tags */
  --color-success-bg: #EBF1EA;
  --color-warning-bg: #FBF3E0;
  --color-danger-bg: #FBEAE6;

  /* Shadows and elevation, kept soft rather than harsh */
  --shadow-soft: 0 2px 12px rgba(14, 14, 15, 0.06);
  --shadow-card: 0 8px 30px rgba(14, 14, 15, 0.10);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Glass and depth, used for the Camper Card and elevated panels */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(14, 14, 15, 0.08);
  --glass-blur: 18px;

  /* Badge stitch line, echoes JT's varsity outline language */
  --stitch: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);

  /* Hero gradient wash, used once per page as a signature moment */
  --hero-wash: radial-gradient(circle at 15% 20%, rgba(217, 84, 31, 0.14), transparent 45%),
               radial-gradient(circle at 85% 0%, rgba(201, 162, 39, 0.12), transparent 40%);

  /* Logo display, light mode defaults */
  --logo-jt-square: url('../assets/logos/light/jt-square-black.png');
  --logo-jt-circle: url('../assets/logos/light/jt-circle-black.png');
  --logo-tcn-crest: url('../assets/logos/light/tcn-crest-color.png');
  --logo-tcn-crest-frame-bg: transparent;
}

html[data-theme="dark"] {
  --color-bg: #0E0E0F;
  --color-surface: #17171A;
  --color-surface-raised: #1E1E22;
  --color-text: #F7F3EC;
  /*
    FIX (item 10 — dark mode contrast pass): bumped from #B8B5AD to
    #C7C4BB. The old value already cleared WCAG AA at body text size
    against these dark surfaces, but it read as thin at the small
    uppercase micro-label sizes used throughout the admin panel
    (table headers, .detail-row-label, .app-card-meta-label,
    .readiness-item, empty-state subtitles). This lightens those
    without touching light mode.
  */
  --color-text-muted: #C7C4BB;
  --color-border: #2B2B2F;

  --color-primary: #F7F3EC;
  --color-accent: #E8632F;
  --color-accent-hover: #F0784B;
  --color-gold: #D9B84A;
  --color-sage: #8FB08A;
  --color-ember: #D9573F;

  --color-success-bg: rgba(122, 155, 118, 0.15);
  --color-warning-bg: rgba(201, 162, 39, 0.15);
  --color-danger-bg: rgba(193, 67, 47, 0.15);

  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);

  --glass-bg: rgba(23, 23, 26, 0.55);
  --glass-border: rgba(247, 243, 236, 0.08);
  --stitch: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);
  --hero-wash: radial-gradient(circle at 15% 20%, rgba(232, 99, 47, 0.18), transparent 45%),
               radial-gradient(circle at 85% 0%, rgba(217, 184, 74, 0.14), transparent 40%);

  /* Logo display, dark mode overrides */
  --logo-jt-square: url('../assets/logos/dark/jt-square-white.png');
  --logo-jt-circle: url('../assets/logos/dark/jt-square-white.png');
  --logo-tcn-crest: url('../assets/logos/dark/tcn-crest-black.png');
  /* TCN crest contains black elements that vanish on true black,
     so it sits inside a light contained card in dark mode */
  --logo-tcn-crest-frame-bg: transparent;
}

/* Logo utility classes, used wherever a brand mark appears */

.logo-jt-square {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: var(--logo-jt-square);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.logo-jt-circle {
  display: inline-block;
  width: 44px;
  height: 44px;
  background-image: var(--logo-jt-circle);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

.logo-tcn-crest {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--radius-md);
  background-color: var(--logo-tcn-crest-frame-bg);
  border: 1px solid var(--glass-border);
}

.logo-tcn-crest img,
.logo-tcn-crest .logo-tcn-crest-mark {
  width: 160px;
  height: 100px;
  background-image: var(--logo-tcn-crest);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  flex-shrink: 0;
}

.logo-tcn-crest-text {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.5;
}