/* Jay Command Center - shared.css
   D-12 reconsideration (2026-07-27): extracted from the 6 rules/selectors that were
   byte-for-byte identical across all 7 module files (today.html, aios.html, builds.html,
   mission-control.html, intel.html, calendar.html, settings.html) - color variables, page
   reset, body/h1 base, the default subtitle style, the full button family, and footer.
   Loaded via <link> BEFORE each module's own <style> block, so any module that still needs
   a different value (e.g. today.html's wider .subtitle bottom margin) simply keeps its own
   rule locally and wins by source order - nothing here should ever need a module to add an
   explicit override just to cancel this file out.
   Deliberately NOT included: .wrap max-width, section/.section-title spacing, .badge,
   .placeholder-tag, .empty, and form-field styling - these vary in real, intentional ways
   between modules (different content widths, different spacing needs) and forcing them into
   one shared value would be a visual behavior change, not a pure dedup. Left local per file.

   D-29 (2026-07-28) - brand reskin: values below were swapped from the original placeholder
   dark theme to iamJayChong Brand Identity v2 tokens. Variable NAMES were kept identical
   (--bg/--panel/--panel2/--border/--text/--muted/--accent/--danger/--warn/--ok) so this stayed
   a single-file value swap - no module's local CSS had to change, since none of the 7 modules
   declare their own h1{}/button{} rule (verified by grep before editing) and all color
   references go through these variable names, not hardcoded hex. --gold/--sans/--mono/--display
   are new tokens, additive only. Palette and font stack lifted directly from Jay's own
   prompt-console.html and media-plan-architect.html (already brand-built, same --bg/--panel/
   --teal/--gold values) rather than re-derived from the brand doc from scratch, for consistency
   with the two tools already living in this dashboard. Semantic danger/warn/ok kept as muted,
   desaturated tones rather than the brand doc's strict "no red/orange/green" rule - that rule
   targets public marketing surfaces; this is a private ops tool where status color still needs
   to read at a glance, and media-plan-architect.html already sets this same precedent
   (--ok:#3F9D7C / --warn:#C77D3A / --bad:#C0544C). Flagged as a deliberate judgment call, not
   an oversight. Full reasoning in ARCHITECTURE_DECISIONS.md D-29.

   D-33 (2026-07-28) - motion pass, part 1 (foundation + shared elements). Timing/easing is
   orthogonal to the exact color values from D-29 (a transition's duration/curve doesn't care
   what hex it's animating between), so this didn't need to wait on Jay's visual color
   confirmation the way the original plan assumed - proceeding now rather than leaving this
   idle. Values match brand doc Section 7 exactly: standard easing for hover/state changes,
   a separate "entry" easing for reveals, 200-250ms hover, 400-600ms reveals (not used yet -
   nothing in this app currently does an entrance/reveal animation, so --ease-entry is defined
   and ready but has no consumer yet). prefers-reduced-motion respected globally, same pattern
   already proven in prompt-console.html. Part 2 (sweeping the same transition treatment across
   every module's own local :hover rules - task-row, product-card, week-day, month-cell, etc.)
   is a separate, mechanical, well-specified follow-up - see NEXT_SPRINT.md.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

:root{
  --bg:#0A0A0A; --panel:#141414; --panel2:#1B1B1B; --border:#272727;
  --text:#E8E6E1; --muted:#8A877F; --accent:#7DCFCC; --gold:#C9A96E;
  --danger:#C0544C; --warn:#D08A6E; --ok:#3F9D7C;
  --sans:"DM Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --display:"Cormorant Garamond",Georgia,serif;
  --ease:cubic-bezier(0.4, 0, 0.2, 1);       /* brand doc 7: standard, hover/state changes */
  --ease-entry:cubic-bezier(0.16, 1, 0.3, 1); /* brand doc 7: entries/reveals */
  --dur-hover:220ms;
  --dur-reveal:500ms;

  /* UI scale (2026-07-31). Jay reported everything reading too small and was
     manually zooming Chrome to 110 pct on every tab. This applies that 110 pct
     permanently, to the shell and to every module, because shared.css is loaded
     by all of them. Change the single number below to adjust: 1 = original,
     1.1 = what Jay was doing by hand, 1.2 = larger again. Safe with the shell's
     layout because index.html sizes itself with height 100 pct, not 100vh, so
     the zoomed box still resolves to exactly one viewport with no overflow. */
  --ui-scale:1.1;
}

html{ zoom:var(--ui-scale); }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important; animation:none!important;}
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  padding:24px;
}
/* Module title = brand's "Mono label" pattern (uppercase, tracked, mono, never heavy) -
   colored gold to match prompt-console.html's own .brand treatment, teal reserved for
   links/CTAs/active state per that file's existing convention. */
h1{font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; margin:0 0 4px;}
.subtitle{font-size:12px; color:var(--muted); margin:0 0 20px;}

a{color:var(--accent); transition:color var(--dur-hover) var(--ease);}
a:hover{color:var(--gold);}

button{
  background:var(--accent); color:var(--bg); border:none; border-radius:7px;
  padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer;
  font-family:var(--sans);
  transition:background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease),
    color var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
button.secondary{background:transparent; border:1px solid var(--border); color:var(--text);}
button.secondary:hover{border-color:var(--accent); color:var(--accent);}
button.small{padding:5px 10px; font-size:11px;}
button:disabled{opacity:.4; cursor:default;}

footer{font-size:11px; color:var(--muted); font-family:var(--mono); margin-top:30px; border-top:1px solid var(--border); padding-top:14px;}