/*
 * diagrams.css — IdentityFirst architecture diagram styles
 *
 * Provides CSS custom-property theming for all inline SVG architecture diagrams.
 * Referenced by: web/2026web/includes/diagrams.php
 * Used on: platform.php (and any future architecture page)
 *
 * Extends MAS-001 (marketing site architecture integration).
 * Authoring note: all colour values here must derive from or be compatible with
 * shared/design-tokens/tokens.css. No raw hex values that contradict the
 * canonical token palette are permitted.
 *
 * Zero external dependencies — no CDN URLs, no external font loads.
 */

/* ============================================================================
   DIAGRAM CSS VARIABLES — light mode defaults (overriding dark-first token base)
   ============================================================================ */

:root {
    /* Background */
    --diagram-bg:              #f8fafc;
    --diagram-surface:         #ffffff;
    --diagram-surface-alt:     #f1f5f9;

    /* Stroke and borders */
    --diagram-stroke:          rgba(0, 0, 0, 0.14);

    /* Text */
    --diagram-text:            #0f172a;
    --diagram-text-muted:      #475569;

    /* Brand / accent (light-mode adjusted for contrast) */
    --diagram-brand:           #0284c7;   /* sky-600 — accessible on white */
    --diagram-accent:          #059669;   /* emerald-600 */
    --diagram-warn:            #d97706;   /* amber-600 */
    --diagram-danger:          #dc2626;   /* red-600 */
    --diagram-purple:          #6d28d9;   /* violet-700 */

    /* Arrow */
    --diagram-arrow:           rgba(0, 0, 0, 0.38);

    /* Tier fills — light */
    --tier-mri-fill:           rgba(2, 132, 199, 0.08);
    --tier-mri-stroke:         #0284c7;

    --tier-core-fill:          rgba(5, 150, 105, 0.07);
    --tier-core-stroke:        #059669;

    --tier-enh-fill:           rgba(217, 119, 6, 0.07);
    --tier-enh-stroke:         #d97706;

    --tier-aisf-fill:          rgba(109, 40, 217, 0.06);
    --tier-aisf-stroke:        #6d28d9;
}

/* ============================================================================
   DARK MODE OVERRIDE
   The PHP site uses the canonical "Digital Vault" dark-navy palette by default;
   these overrides apply when the OS/browser reports light preference.
   We invert: the SVG files embed :root dark values inline, so the @media query
   below corrects them for light mode consumers (browsers that already loaded
   the inline SVG style block will pick up these cascade values when specificity
   allows, but the diagrams.css :root block above acts as the primary light anchor).
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark — "Digital Vault" palette (matches tokens.css :root dark defaults) */
        --diagram-bg:              #070b14;
        --diagram-surface:         #0d1425;
        --diagram-surface-alt:     #131c33;

        --diagram-stroke:          rgba(255, 255, 255, 0.18);

        --diagram-text:            #f0f4f8;
        --diagram-text-muted:      #8899b0;

        --diagram-brand:           #38bdf8;   /* sky-400 */
        --diagram-accent:          #10b981;   /* emerald-500 */
        --diagram-warn:            #f59e0b;   /* amber-400 */
        --diagram-danger:          #ef4444;   /* red-400 */
        --diagram-purple:          #8b5cf6;   /* violet-400 */

        --diagram-arrow:           rgba(255, 255, 255, 0.40);

        --tier-mri-fill:           rgba(56, 189, 248, 0.10);
        --tier-mri-stroke:         #38bdf8;

        --tier-core-fill:          rgba(16, 185, 129, 0.08);
        --tier-core-stroke:        #10b981;

        --tier-enh-fill:           rgba(245, 158, 11, 0.07);
        --tier-enh-stroke:         #f59e0b;

        --tier-aisf-fill:          rgba(139, 92, 246, 0.07);
        --tier-aisf-stroke:        #8b5cf6;
    }
}

/* ============================================================================
   DIAGRAM WRAPPER — layout and spacing
   ============================================================================ */

.diagram-wrapper {
    margin-block:    var(--space-10, 2.5rem);
    border-radius:   12px;
    overflow:        hidden;
    border:          1px solid var(--diagram-stroke);
    background:      var(--diagram-bg);
    /* Subtle shadow to lift off page surface */
    box-shadow:      0 2px 16px rgba(0, 0, 0, 0.12);
    /* Horizontal scroll fallback for narrow viewports */
    overflow-x:      auto;
}

.diagram-wrapper svg {
    display:         block;
    width:           100%;
    height:          auto;
    max-width:       100%;
    /* Prevent SVG from inheriting parent colour-scheme conflicts */
    color-scheme:    normal;
}

/* Caption below the diagram */
.diagram-wrapper figcaption,
.diagram-caption {
    padding:         0.5rem 1rem 0.75rem;
    font-size:       var(--text-xs, 0.75rem);
    color:           var(--diagram-text-muted);
    border-top:      1px solid var(--diagram-stroke);
    background:      var(--diagram-surface-alt);
    line-height:     1.6;
}

/* Heading above diagram group */
.diagram-section-title {
    font-size:       var(--text-sm, 0.875rem);
    font-weight:     700;
    color:           var(--diagram-text-muted);
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    margin-bottom:   var(--space-3, 0.75rem);
}

/* Reduced motion — disable any future SVG animations */
@media (prefers-reduced-motion: reduce) {
    .diagram-wrapper svg * {
        animation:           none !important;
        transition-duration: 0s  !important;
    }
}