/* ═══════════════════════════════════════════════════════════════════════
   site-design.css — Azure Cloud Architecture Reference
   ───────────────────────────────────────────────────────────────────────
   Shared design system overlay. Composes with the per-page CSS variables
   already defined in each v4.1 page (--paper, --ink, --accent, etc.).
   Adds:
     · Named easings + two-layer shadow tokens
     · 5 named animations: fadeUp, barReveal, checkPulse, popIn, ripple
     · Custom scrollbar
     · Print styles
     · Reduced-motion guard
     · Utility classes that pages opt into (.az-pop-in, .az-bar-fill, etc.)

   Drop into <head> AFTER the per-page <style> block:
     <link rel="stylesheet" href="site-design.css"/>

   Source: extracted from /repo/Htmls/tool Builder/PROMPT-DESIGN.md
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Easings ───────────────────────────────────────────────────────── */
  --az-ease-base:   cubic-bezier(.25, .46, .45, .94);  /* normal movement */
  --az-ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* COMPLETION ONLY */
  --az-ease-out:    cubic-bezier(.16, 1, .3, 1);       /* gentle decel    */

  /* ── Two-layer shadows ─────────────────────────────────────────────── */
  /* Highest-impact change from the CCoE design system. Real objects cast
     two shadows: tight contact + diffused ambient. One layer reads as
     "outlined", two layers read as "floating". */
  --az-shadow-card:       0 1px 3px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --az-shadow-card-hover: 0 4px 12px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.10);
  --az-shadow-glass:      0 1px 0 rgba(255,255,255,.6) inset,
                          0 2px 8px rgba(0,0,0,.04),
                          0 0 0 1px rgba(0,0,0,.03);

  /* ── Motion timings ────────────────────────────────────────────────── */
  --az-t-fast:    .15s;
  --az-t-base:    .22s;
  --az-t-slow:    .45s;
  --az-t-reveal:  .65s;
}

:root.dark {
  --az-shadow-card:       0 2px 8px rgba(0,0,0,.20), 0 0 0 1px rgba(255,255,255,.04);
  --az-shadow-card-hover: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  --az-shadow-glass:      0 1px 0 rgba(255,255,255,.04) inset,
                          0 2px 8px rgba(0,0,0,.25),
                          0 0 0 1px rgba(255,255,255,.04);
}

/* ════════════════════════════════════════════════════════════════════════
   1 · NAMED ANIMATIONS
   ──────────────────────────────────────────────────────────────────────
   Each animation has a single purpose. Don't use spring on structural
   reveals — it's reserved for COMPLETION moments only.
   ════════════════════════════════════════════════════════════════════════ */

/* fadeUp — structural arrivals on page load.
   Already half-present in v4.1 as .az-reveal; this is the canonical version. */
@keyframes az-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.az-fade-up        { animation: az-fade-up .4s var(--az-ease-base) both; }
.az-fade-up.az-d1  { animation-delay: .08s; }
.az-fade-up.az-d2  { animation-delay: .16s; }
.az-fade-up.az-d3  { animation-delay: .24s; }
.az-fade-up.az-d4  { animation-delay: .32s; }
.az-fade-up.az-d5  { animation-delay: .40s; }

/* barReveal — progress fills without layout reflow.
   Use clip-path, never width transitions. */
@keyframes az-bar-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.az-bar-fill {
  position: absolute; inset: 0;
  border-radius: inherit;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .6s var(--az-ease-base);
}
.az-bar-fill.az-on { clip-path: inset(0 0 0 0); }
.az-bar-fill.az-animate { animation: az-bar-reveal .6s var(--az-ease-base) forwards; }

/* checkPulse — completion acknowledgment ring.
   Fires once when an element completes (checkbox tick, score → 100%, etc.) */
@keyframes az-check-pulse {
  0%   { box-shadow: 0 0 0 0   var(--az-pulse, rgba(196,112,74,.45)); }
  70%  { box-shadow: 0 0 0 14px var(--az-pulse-end, rgba(196,112,74,0));  }
  100% { box-shadow: 0 0 0 0   var(--az-pulse-end, rgba(196,112,74,0));   }
}
.az-check-pulse { animation: az-check-pulse .65s var(--az-ease-base); }

/* popIn — reactive reveals.
   For elements that appear IN RESPONSE TO a user action (verdict panel,
   score result, generated output). Uses spring bezier to imply the
   element was created by the action. */
@keyframes az-pop-in {
  0%   { opacity: 0; transform: scale(.6);  }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1);   }
}
.az-pop-in { animation: az-pop-in .45s var(--az-ease-spring) both; }

/* Button ripple — click confirmation. */
.az-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  transform: scale(0);
  animation: az-ripple-grow .55s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
@keyframes az-ripple-grow {
  to { transform: scale(4); opacity: 0; }
}
.az-ripple-host { position: relative; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   2 · SHADOW UTILITY CLASSES
   ──────────────────────────────────────────────────────────────────────
   Apply on any card surface. Pairs with hover transform for the floating
   effect. The transform on hover is intentional — when something lifts,
   its contact shadow shrinks AND its ambient shadow grows.
   ════════════════════════════════════════════════════════════════════════ */

.az-card-shadow {
  box-shadow: var(--az-shadow-card);
  transition: box-shadow var(--az-t-base) var(--az-ease-base),
              transform   var(--az-t-base) var(--az-ease-base);
}
.az-card-shadow.az-hoverable:hover,
.az-card-shadow.az-hoverable:focus-within {
  box-shadow: var(--az-shadow-card-hover);
  transform: translateY(-3px);
}

/* ════════════════════════════════════════════════════════════════════════
   3 · CUSTOM SCROLLBAR
   ──────────────────────────────────────────────────────────────────────
   The 12–17px OS default scrollbar dominates styled panels. 6px reads
   as a designed element rather than a system widget.
   ════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink5, #C8C2B8);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink4, #9E978D); }
* { scrollbar-width: thin; scrollbar-color: var(--ink5, #C8C2B8) transparent; }

.dark ::-webkit-scrollbar-thumb       { background: var(--rule, #3A3A40); }
.dark ::-webkit-scrollbar-thumb:hover { background: var(--ink5, #4E4A44); }

/* ════════════════════════════════════════════════════════════════════════
   4 · FOCUS RINGS  (:focus-visible, never :focus)
   ──────────────────────────────────────────────────────────────────────
   :focus fires on mouse clicks — the ring appears and immediately
   disappears, looking like a glitch. :focus-visible only fires for
   keyboard navigation.
   ════════════════════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, var(--ink4, #C4704A));
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* ════════════════════════════════════════════════════════════════════════
   5 · GLASS TOPBAR PATTERN
   ──────────────────────────────────────────────────────────────────────
   Sticky topbar with backdrop-filter. Apply with class="az-glass-bar"
   on any nav/header that should signal "navigation surface".
   ════════════════════════════════════════════════════════════════════════ */

.az-glass-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 241, 235, .88);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule, #D8D3CA);
  transition: background var(--az-t-base) var(--az-ease-base);
}
:root.dark .az-glass-bar {
  background: rgba(26, 26, 31, .88);
}

/* Topbar live-stats slot — name on the left, dynamic counters on the right.
   Pattern from /repo/Htmls/Ecosystem/ccoe-ecosystem.html */
.az-topbar-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--ink4, #9E978D);
  text-align: right;
  line-height: 1.6;
}
.az-topbar-meta strong {
  color: var(--accent, #C4704A);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   6 · ANIMATED FLOW LINE  (for SVG diagrams)
   ──────────────────────────────────────────────────────────────────────
   Apply with class="az-flow-line" on any SVG <path> or <line>. Creates
   the marching-ants effect seen in the ecosystem diagram — useful in
   network topology, landing zone, architecture patterns pages.
   ════════════════════════════════════════════════════════════════════════ */

.az-flow-line {
  fill: none;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
  animation: az-dash-flow 1.8s linear infinite;
}
@keyframes az-dash-flow { to { stroke-dashoffset: -22; } }

/* ════════════════════════════════════════════════════════════════════════
   7 · PRESENTER MODE
   ──────────────────────────────────────────────────────────────────────
   Press P to hide chrome and show only content. Useful for demos,
   screenshares, executive walkthroughs. Activated by site-ux.js.
   ════════════════════════════════════════════════════════════════════════ */

body.az-presenter nav,
body.az-presenter .page-footer,
body.az-presenter .footer,
body.az-presenter .topnav,
body.az-presenter .foot {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--az-ease-base);
}
.az-presenter-hint {
  position: fixed; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .14em;
  background: var(--ink, #1D1B18);
  color: var(--paper, #F4F1EB);
  padding: 6px 16px; border-radius: 20px;
  z-index: 200; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--az-ease-base);
}
body.az-presenter .az-presenter-hint { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
   8 · PRINT STYLES
   ──────────────────────────────────────────────────────────────────────
   These artifacts get printed for governance meetings. Default is
   "look like a screenshot of a webpage." Goal is "look like a document."
   ════════════════════════════════════════════════════════════════════════ */

@media print {
  *,*::before,*::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { background: #fff !important; font-size: 11pt; }
  body::before, body::after { display: none !important; }

  nav, .topnav, .nav, .search, .expand-all,
  button, .btn, .toolbar-btn, .results-clear,
  .dark-mode-toggle, #dark-mode-toggle,
  .az-scroll-bar, .az-presenter-hint,
  .palette-search, .chip-remove { display: none !important; }

  .wrap, .page, .container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .calc-layout, .l-hero { grid-template-columns: 1fr !important; }

  .card, .group, .tcard, .gcard, .results, .palette, .presets,
  .pattern, .ctrl, .scorebar, .checklist {
    border: 1px solid #ccc !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a              { color: #000 !important; text-decoration: none !important; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt; color: #555 !important;
    word-break: break-all;
  }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Force chip backgrounds + colored dots to print */
  .chip, .chip-dot, .palette-svc-dot, .composite-number,
  .child-dot, .sr-dot, .child-badge {
    -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   9 · REDUCED MOTION GUARD
   ──────────────────────────────────────────────────────────────────────
   Required for accessibility. Disables decorative animations for users
   who've opted out at the OS level.
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:   .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  .01ms !important;
    scroll-behavior:      auto !important;
  }
  .az-bar-fill { clip-path: inset(0 0 0 0) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   10 · RESPONSIVE  (single-column at 768px)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .calc-layout,
  .l-hero,
  .two-col,
  .engagement-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CENTRALIZED COLOR TOKENS  (added in palette refactor 2026-05-21)
   ───────────────────────────────────────────────────────────────────────
   Source of truth for every color the site uses. Per-page :root blocks
   may still override these for domain accenting, but the foundation,
   semantics, brand and domain colors live HERE. See README.md for the
   meaning of each token group.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Foundation neutrals (paper / ink / hairlines) ──────────────────── */
  --paper:     #F4F1EB;   /* page background — cream */
  --white:     #FFFFFF;   /* card/surface background */
  --warm:      #EDE9E1;   /* warm surface tint */
  --ink:       #1D1B18;   /* primary text */
  --ink2:      #3A3632;   /* strong secondary text */
  --ink3:      #6A645C;   /* meta / labels (AA passes for body) */
  --ink4:      #9E978D;   /* decorative text — NOT body copy (fails AA) */
  --ink5:      #C8C2B8;   /* hairline-strength text — decorative only */
  --rule:      #D8D3CA;   /* default hairline */
  --rule-lt:   #E8E4DC;   /* faintest hairline */
  --rule-dk:   #C4BFB6;   /* emphasized hairline */
  --border:    #E2DFD8;   /* card border alias */

  /* ── Brand ──────────────────────────────────────────────────────────── */
  /* The site's primary identity color. Always terracotta on every page.
     Distinct from --domain-accent (which varies per domain page). */
  --brand:       #C4704A;
  --brand-warm:  #D4885E;
  --brand-bg:    rgba(196,112,74,0.08);
  --brand-bg-2:  rgba(196,112,74,0.12);

  /* ── Per-page domain accent (default = brand) ───────────────────────── */
  /* Domain pages override these locally. Generic pages inherit brand. */
  --domain-accent:       var(--brand);
  --domain-accent-light: var(--brand-warm);
  --domain-accent-dark:  #8C4428;
  --domain-accent-bg:    var(--brand-bg);

  /* Legacy alias — many existing inline styles read --accent.
     Keep this pointed at brand so unmodified pages stay correct. */
  --accent:        var(--brand);
  --accent-warm:   var(--brand-warm);

  /* ── Semantic colors (status, callouts) ─────────────────────────────── */
  --green:        #3D7A5A;
  --green-bg:     #E8F0EA;
  --green-border: rgba(61,122,90,0.18);
  --red:          #8A3030;
  --red-bg:       #F5E8E8;
  --red-border:   rgba(138,48,48,0.20);
  --blue:         #3D5A8A;
  --blue-bg:      #E4EAF2;
  --amber:        #8A6B2E;
  --amber-bg:     #F5F0E3;

  /* ── 11 Azure domain colors (light mode) ────────────────────────────── */
  /* Each domain has a distinct hue spread across the wheel. The four
     CHANGED entries below resolved perceptual clashes found in the audit. */
  --c-compute:        #C4704A;   /* terracotta */
  --c-network:        #5B8C6E;   /* sage */
  --c-security:       #7A3040;   /* wine */
  --c-storage:        #2A6B6B;   /* deep teal */
  --c-database:       #3D3D8A;   /* indigo */
  --c-identity:       #8A6B2E;   /* olive */
  --c-aiml:           #6B3FA0;   /* deep purple */
  --c-monitor:        #A85C72;   /* CHANGED rose — was #6B4A8A purple (clashed w/ AI-ML) */
  --c-migrate:        #6A4A30;   /* CHANGED chocolate — was #96624A brown (clashed w/ Compute) */
  --c-integ:          #1F7060;   /* CHANGED emerald — was #4A7C5A forest (clashed w/ Network) */
  --c-data-analytics: #3D7A99;   /* CHANGED azure — was #3D5A99 navy (clashed w/ Database) */

  /* ── Three-pillar colors (used on hub/landing pages) ────────────────── */
  --c-guide:  #B85C2E;   /* burnt orange */
  --c-tool:   #4A7C8A;   /* teal */
  --c-ref:    #8A7045;   /* warm olive */
}

:root.dark {
  /* ── Foundation flip for dark mode ──────────────────────────────────── */
  --paper:     #1A1A1F;
  --white:     #242428;
  --warm:      #2A2A30;
  --ink:       #E8E4DC;
  --ink2:      #D4D0C8;
  --ink3:      #A8A298;
  --ink4:      #7A756C;
  --ink5:      #4E4A44;
  --rule:      #3A3A40;
  --rule-lt:   #2E2E34;
  --rule-dk:   #50505A;
  --border:    #3A3A40;

  /* Brand stays warm but lighter for dark surface */
  --brand:        #D4885E;
  --brand-warm:   #E6A480;
  --brand-bg:     rgba(212,136,94,0.10);
  --brand-bg-2:   rgba(212,136,94,0.18);

  --domain-accent:       var(--brand);
  --domain-accent-light: var(--brand-warm);
  --domain-accent-dark:  #C4704A;
  --domain-accent-bg:    var(--brand-bg);

  --accent:       var(--brand);
  --accent-warm:  var(--brand-warm);

  /* Semantic colors shift to maintain contrast on dark surface */
  --green:        #5BA87A;
  --green-bg:     #1E2E24;
  --red:          #C45A5A;
  --red-bg:       #2E1E1E;
  --blue:         #5A8AC4;
  --blue-bg:      #1E2430;
  --amber:        #C49A3E;
  --amber-bg:     #2E2818;

  /* Domain colors brighten for dark mode visibility */
  --c-compute:        #D4885E;
  --c-network:        #7AE0A0;
  --c-security:       #FF7EB3;
  --c-storage:        #58E0D9;
  --c-database:       #6C9EFF;
  --c-identity:       #FFB86C;
  --c-aiml:           #9B7AB8;
  --c-monitor:        #E095AB;   /* CHANGED — light rose */
  --c-migrate:        #C3936B;   /* CHANGED — light tan */
  --c-integ:          #6BC4A0;   /* CHANGED — light emerald */
  --c-data-analytics: #7AB8E0;   /* CHANGED — light azure */

  --c-guide:  #D4885E;
  --c-tool:   #58E0D9;
  --c-ref:    #C3AB83;
}
