/* AUTO-GENERATED by sync-css.js — do not edit directly. */
/* Edit shared-css/ sources or _*-local.css files, then run: node sync-css.js */

/* ===== Font Faces ===== */
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Bold-Italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina Typewriter';
  src: url('../fonts/GT-Alpina-Typewriter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina Typewriter';
  src: url('../fonts/GT-Alpina-Typewriter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura Mono';
  src: url('../fonts/GT-Pressura-Mono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura Mono';
  src: url('../fonts/GT-Pressura-Mono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Custom Properties ===== */

:root {
  /* Flexoki Base */
  --fx-paper: #FFFCF0;
  --fx-black: #100F0F;
  --fx-base-50:  #F2F0E5;
  --fx-base-100: #E6E4D9;
  --fx-base-150: #DAD8CE;
  --fx-base-200: #CECDC3;
  --fx-base-300: #B7B5AC;
  --fx-base-400: #9F9D96;
  --fx-base-500: #878580;
  --fx-base-600: #6F6E69;
  --fx-base-700: #575653;
  --fx-base-800: #403E3C;
  --fx-base-850: #343331;
  --fx-base-900: #282726;
  --fx-base-950: #1C1B1A;

  /* Flexoki Accent Colors */
  --fx-red-400: #D14D41;
  --fx-red-600: #AF3029;
  --fx-orange-400: #DA702C;
  --fx-orange-600: #BC5215;
  --fx-yellow-400: #DFB431;
  --fx-yellow-600: #AD8301;
  --fx-green-400: #879A39;
  --fx-green-500: #768D21;
  --fx-green-600: #66800B;
  --fx-cyan-400: #3AA99F;
  --fx-cyan-600: #24837B;
  --fx-blue-400: #4385BE;
  --fx-blue-500: #3171B2;
  --fx-blue-600: #205EA6;
  --fx-purple-400: #8B7EC8;
  --fx-purple-600: #5E409D;
  --fx-magenta-400: #CE5D97;
  --fx-magenta-600: #A02F6F;

  /* Semantic Colors */
  --color-bg: var(--fx-paper);
  --color-text: var(--fx-base-950);
  --color-text-secondary: var(--fx-base-700);
  --color-text-muted: var(--fx-base-600);
  --color-border: var(--fx-base-200);
  --color-surface: #FFFFFF;
  --color-surface-hover: var(--fx-base-50);
  --color-brand: var(--fx-orange-600);
  --color-accent: var(--fx-purple-600);
  --color-link: var(--fx-blue-600);
  --color-link-hover: var(--fx-blue-400);
  --shadow-color: rgba(16, 15, 15, 0.08);

  /* Typography Scale — 1.2 ratio, 19px body base */
  --font-serif: 'GT Alpina', 'Georgia', serif;
  --font-sans: 'GT Pressura', system-ui, sans-serif;
  --font-typewriter: 'GT Alpina Typewriter', 'Courier New', monospace;
  --font-mono: 'GT Pressura Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  --base-size: 1.1875rem;
  --wb-p3: 0.99rem;
  --badge-size: 0.825rem;
  --wb-p2: 1.1875rem;
  --wb-p1: 1.5rem;

  /* Component Spacing — 8px grid */
  --sp-1: 0.5rem;     /* 8px */
  --sp-2: 1rem;       /* 16px */
  --sp-3: 1.5rem;     /* 24px */
  --sp-4: 2rem;       /* 32px */
  --sp-5: 3rem;       /* 48px */
  --sp-6: 4rem;       /* 64px */
  --sp-7: 6rem;       /* 96px */
  --sp-8: 8rem;       /* 128px */

  /* Heading spacing-after */
  --sp-after-h1: 0.5em;
  --sp-after-h2: 0.5em;
  --sp-after-h3: 0.4em;
  --sp-after-h4: 0.4em;
  --sp-after-h5: 0.3em;

  /* Component tokens */
  --radius-card: 0.5rem;  /* 8px */
  --border-accent: 4px;

  /* Fluid heading scale */
  --h5: clamp(1.5rem, calc(1.175rem + 1.65vw), 2.16rem);
  --h4: clamp(1.8rem, calc(1.4rem + 2vw), 2.592rem);
  --h3: clamp(2.16rem, calc(1.69rem + 2.38vw), 3.11rem);
  --h2: clamp(2.592rem, calc(2.025rem + 2.85vw), 3.732rem);
  --h1: clamp(3.11rem, calc(2.425rem + 3.43vw), 4.478rem);

  /* Display heading — hero/landing page use */
  --h-display: clamp(2.5rem, 10vw, 12.5rem);

  /* Section Spacing — fluid vertical rhythm */
  --sp-section:    clamp(3.5rem, 7vh, 7rem);   /* standard section padding */
  --sp-section-lg: clamp(5rem, 11vh, 11rem);   /* hero/intro generous spacing */
  --sp-section-sm: clamp(2rem, 4vh, 4rem);     /* compact/utility sub-sections */
  --sp-section-x:  clamp(1.5rem, 5vw, 8vw);   /* horizontal section inset */

  --color-selected: var(--fx-green-600);
}

/* ===== Small Viewport Step-Down ===== */
@media (max-width: 480px) {
  :root {
    --wb-p1: 1.1875rem;  /* steps down from 1.5rem (P1 → P2) */
    --wb-p2: 0.99rem;    /* steps down from 1.1875rem (P2 → P3) */
  }
}

/* ===== Dark Mode ===== */
html.dark {
  /* Semantic overrides */
  --color-bg: var(--fx-base-950);
  --color-text: var(--fx-base-100);
  --color-text-secondary: var(--fx-base-300);
  --color-text-muted: var(--fx-base-400);
  --color-border: var(--fx-base-800);
  --color-surface: var(--fx-base-900);
  --color-surface-hover: var(--fx-base-850);
  --color-brand: var(--fx-orange-400);
  --color-accent: var(--fx-purple-400);
  --color-link: var(--fx-blue-400);
  --color-link-hover: var(--fx-blue-600);
  --shadow-color: rgba(0, 0, 0, 0.3);

  --color-selected: var(--fx-green-600);
}


/* ===== Base Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--wb-p2);
  font-feature-settings: "ss01" 0, "ss02" 1, "ss03" 1;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-feature-settings: normal;
  font-variant-numeric: normal;
  margin-top: 0;
  color: var(--color-text);
}

h1 { font-size: var(--h1); font-weight: 900; line-height: 1.0;  margin-bottom: var(--sp-after-h1); }
h2 { font-size: var(--h2); font-weight: 900; line-height: 1.05; margin-bottom: var(--sp-after-h2); }
h3 { font-size: var(--h3); font-weight: 700; line-height: 1.1;  margin-bottom: var(--sp-after-h3); }
h4 { font-size: var(--h4); font-weight: 700; line-height: 1.15; margin-bottom: var(--sp-after-h4); }
h5 { font-size: var(--h5); font-weight: 500; line-height: 1.15; margin-bottom: var(--sp-after-h5); }

/* ===== Links ===== */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}
a:hover:not(.btn-tactile) {
  color: var(--color-link-hover);
}

/* ===== Paragraphs ===== */
p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* ===== Selection ===== */
::selection {
  background-color: var(--fx-orange-400);
  color: var(--fx-base-950);
}
html.dark ::selection {
  background-color: var(--fx-orange-600);
  color: var(--fx-base-50);
}

/* ===== Scrollbar (subtle) ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fx-base-300);
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: var(--fx-base-700);
}

/* ===== Accessibility ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== Loading Skeleton ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--fx-base-100) 25%,
    var(--fx-base-150) 50%,
    var(--fx-base-100) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
html.dark .skeleton {
  background: linear-gradient(
    90deg,
    var(--fx-base-850) 25%,
    var(--fx-base-800) 50%,
    var(--fx-base-850) 75%
  );
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Layout Utilities ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ===== Site Footer ===== */
.site-footer {
  margin-top: 4rem;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--wb-p3);
  color: var(--color-text-muted);
}

.site-footer p {
  margin: 0.3em 0;
}

.site-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-text);
}

.site-footer__rss {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

/* ===== Embed Mode ===== */
body.embed .site-header,
body.embed .site-footer {
  display: none;
}
body.embed {
  background: transparent;
}

/* ===== Category Badge Colors ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  font-family: var(--font-sans);
  font-size: var(--wb-p3);
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.3;
}
a.badge {
  text-decoration: none;
  color: inherit;
}

/* Category badges — aligned to Warm Conviction palette */
.badge--strategic      { background: #F5E8DC; color: #BC5215; }     /* Orange — Strategic Choice */
.badge--organizational { background: #EDEBF4; color: #5E409D; }     /* Purple — Organizational Change */
.badge--program        { background: #E3ECF3; color: #205EA6; }     /* Blue — Program & Experience Design */
.badge--thinking       { background: #EDEBF4; color: #5E409D; }     /* Purple — Thinking & Judgment */
.badge--value          { background: #E8EDE0; color: #66800B; }     /* Green — Value & Outcomes */
.badge--default        { background: var(--fx-base-100); color: var(--fx-base-700); }

/* Dark mode badge adjustments */
html.dark .badge--strategic      { background: #3A2208; color: #DA702C; }
html.dark .badge--organizational { background: #261C39; color: #8B7EC8; }
html.dark .badge--program        { background: #12253B; color: #4385BE; }
html.dark .badge--thinking       { background: #261C39; color: #8B7EC8; }
html.dark .badge--value          { background: #1F2B10; color: #879A39; }
html.dark .badge--default        { background: var(--fx-base-850); color: var(--fx-base-300); }