/* ═══════════════════════════════════════════════════════════════════════════
   Campus365 — design tokens
   ═══════════════════════════════════════════════════════════════════════════

   THE ONLY FILE IN THIS REPOSITORY THAT MAY CONTAIN A COLOUR LITERAL.

   Everything else — .razor, other .css — references these variables.
   Campus365.Architecture.Tests.SourceRuleTests.No_colour_literals_outside_the_theme_token_file
   fails the build on a stray hex value, because ChurchWorks ended up with three conflicting
   definitions of its own brand colour and no way to tell which one was authoritative.

   Campus365 keeps the eLivecode design system — structure, spacing, typography, component
   conventions — but takes its own accent: indigo rather than the family emerald, so it reads as a
   distinct product while staying recognisably part of the family.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Brand: indigo ── */
    --c365-brand-25:  #f5f6ff;
    --c365-brand-50:  #eef1ff;
    --c365-brand-100: #e0e5ff;
    --c365-brand-200: #c6cfff;
    --c365-brand-300: #a3b0fd;
    --c365-brand-400: #7f8bf9;
    --c365-brand-500: #5b63f0;
    --c365-brand-600: #4a45e0;
    --c365-brand-700: #3f36c4;
    --c365-brand-800: #342e9e;
    --c365-brand-900: #2e2b7d;
    --c365-brand-950: #1d1b4b;

    --c365-brand: var(--c365-brand-600);
    --c365-brand-contrast: #ffffff;
    --c365-brand-soft: rgba(74, 69, 224, 0.10);

    /* The product's own accent, for anything that needs a colour where no school brand applies.
       The report-card preview below falls back to it, and so does ReportTemplate.razor when a
       school has set neither a primary nor an accent. It was referenced in both places for some
       time without ever being defined, so both fell back to nothing. */
    --c365-accent: var(--c365-brand);

    /* ── Surfaces and text ── */
    --c365-background: #f8f9fc;
    --c365-surface: #ffffff;
    --c365-surface-muted: #f2f4f8;
    --c365-foreground: #101828;
    --c365-muted-foreground: #667085;
    --c365-border: #e4e7ec;
    --c365-border-strong: #d0d5dd;
    --c365-hover-bg: #f2f4f7;

    /* ── Sidebar ──
       Deep brand, not black, and not the page surface. This is the eLivecode shell: IceWorks runs its
       sidebar on --iw-brand-950 with the note "deep brand, not black, so the shell reads as one
       product", and PharmaWorks does the same in pine. Campus365 had a white sidebar, which is the one
       place the product stopped looking like the family — the hue was the deliberate divergence
       (indigo, see docs/BRAND.md), the shell never was.

       Named tokens rather than brand-950 inline, because the sidebar is the one surface whose
       foreground/background pair has to be reasoned about together. Measured against #1d1b4b: ink
       7.3:1, active 5.3:1, wordmark 16:1.

       Deliberately NOT redefined for dark mode, exactly as IceWorks leaves its own. The sidebar is the
       product's fixed furniture; it is the content beside it that changes. */
    --c365-sidebar-bg: var(--c365-brand-950);
    --c365-sidebar-border: #2b2860;
    --c365-sidebar-hover: #2a2769;
    --c365-sidebar-ink: #a9add4;
    --c365-sidebar-ink-strong: #ffffff;
    --c365-sidebar-active: var(--c365-brand-400);
    --c365-sidebar-active-bg: rgba(127, 139, 249, 0.16);

    /* ── Semantic states ── */
    --c365-success: #067647;
    --c365-success-bg: #ecfdf3;
    --c365-warning: #b54708;
    --c365-warning-bg: #fffaeb;
    --c365-danger: #b42318;
    --c365-danger-bg: #fef3f2;
    --c365-info: #175cd3;
    --c365-info-bg: #eff8ff;

    /* ── Typography ── */
    --c365-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --c365-font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
    --c365-font-size-base: 14px;
    --c365-line-height: 1.6;

    /* ── Spacing and shape ── */
    --c365-radius-sm: 4px;
    --c365-radius: 8px;
    --c365-radius-lg: 12px;
    --c365-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --c365-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10);
}

/* Dark mode is a token swap, never a second stylesheet. Toggled by a class on <html> set before
   first paint, so there is no flash of the light theme. */
html.dark {
    --c365-brand: var(--c365-brand-400);
    --c365-brand-contrast: #10132b;
    --c365-brand-soft: rgba(127, 139, 249, 0.14);

    --c365-background: #0c0e18;
    --c365-surface: #141726;
    --c365-surface-muted: #1b1f30;
    --c365-foreground: #e6e8ef;
    --c365-muted-foreground: #98a2b3;
    --c365-border: #262b3d;
    --c365-border-strong: #333a50;
    --c365-hover-bg: #1b1f30;

    --c365-success-bg: #052e1c;
    --c365-warning-bg: #2e1c05;
    --c365-danger-bg: #2e0f0c;
    --c365-info-bg: #06203f;
}

/* ── Report card design preview ──────────────────────────────────────────────
   The school's own colours arrive as --c365-report-primary / --c365-report-accent,
   set inline from SchoolBrand. Both fall back to the product's accent, so a school
   that has set nothing still gets a card that looks deliberate. This file is the
   only stylesheet permitted a colour literal, which is why the fallback lives here
   and the school's value never does. */
.c365-report-preview {
  --c365-report-primary: var(--c365-accent);
  --c365-report-accent: var(--c365-accent);

  border: 1px solid var(--c365-border);
  border-top: 4px solid var(--c365-report-primary);
  border-radius: var(--c365-radius);
  padding: 1.25rem;
  background: var(--c365-surface);
}

.c365-report-preview__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.c365-report-preview__logo {
  max-height: 56px;
  max-width: 140px;
}

.c365-report-preview__school {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--c365-report-primary);
}

.c365-report-preview__motto {
  font-style: italic;
  color: var(--c365-muted-foreground);
}

.c365-report-preview__title {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c365-report-accent);
  border-bottom: 2px solid var(--c365-report-accent);
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
}

.c365-report-preview__signatures {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  color: var(--c365-muted-foreground);
}