/* GENERATED — do not hand-edit. Design tokens (unscoped) + primary nav / mega-menu
 * + footer + page-rails rules extracted from tools/acf-gen/src/css/site.css.
 * Regenerate with: npm run assets:fo */


:root {
  
  --color-brand-primary: #24223A;      
  --color-brand-secondary: #F2F2F2;    

  
  --color-accent-1: #7C7EEE;           
  --color-accent-2: #FFBDEF;           
  --color-accent-3: #3EFFEE;           
  --color-accent-4: #FF7500;           
  --color-accent-5: #008B70;           
  --color-accent-6: #00B3C6;           

  
  --color-accent: var(--color-accent-1);

  
  --color-surface-1: #F2F2F2;          
  --color-surface-2: #E7E7EF;          
  --color-surface-3: #7C7EEE;          
  --color-surface-inverse: #24223A;

  
  --color-text-strong: #24223A;
  --color-text-muted: #54516E;
  --color-text-dim: #8B88A0;
  --color-text-inverse: #F2F2F2;
  --color-text-accent: #7C7EEE;
  
  --color-text: var(--color-text-strong);
  --color-text-muted-legacy: var(--color-text-muted);

  
  --color-border-subtle: #E5E5E5;
  --color-border-strong: #24223A;
  --color-border-accent: #7C7EEE;
  --color-border: var(--color-border-subtle);

  
  --color-status-success: #008B70;
  --color-status-warning: #FF7500;
  --color-status-error: #FF0040;

  
  --type-family-display: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-family-body: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-family-eyebrow: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-family-button: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-family-mono: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;  

  
  --type-size-h1: 56px;
  --type-size-h2: 40px;
  --type-size-h3: 28px;
  --type-size-h4: 22px;
  --type-size-h5: 18px;
  --type-size-h6: 14px;
  --type-size-body-lg: 22px;   
  --type-size-body: 16px;
  --type-size-body-sm: 14px;
  --type-size-eyebrow: 12px;
  --type-size-button: 14px;
  --type-size-mono: 12px;

  
  --type-size-blog-h1: 44px;
  --type-size-blog-h2: 32px;
  --type-size-blog-h3: 24px;
  --type-size-blog-h4: 20px;
  --type-size-blog-h5: 18px;
  --type-size-blog-h6: 16px;
  --type-size-blog-body: 20px;

  
  --type-lh-tight: 1.1;
  --type-lh-snug: 1.2;
  --type-lh-normal: 1.4;

  
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  
  --radius-bevel: 18px;

  
  --container-max: 1200px;
  --gutter: 24px;
  --section-y: var(--space-16);
}


[data-theme="dark"] {
  --color-surface-1: #24223A;
  --color-surface-2: #2E2C48;
  --color-surface-3: #7C7EEE;
  --color-surface-inverse: #F2F2F2;   

  --color-text-strong: #F2F2F2;
  --color-text-muted: #B3B1C7;
  --color-text-dim: #706D8D;
  --color-text-inverse: #24223A;
  --color-text-accent: #3EFFEE;        
  --color-text: var(--color-text-strong);

  --color-border-subtle: #3B3959;   
  --color-border-strong: #F2F2F2;
  --color-border-accent: #7C7EEE;
  --color-border: var(--color-border-subtle);

  --color-status-success: #1E7A3C;     
  --color-status-warning: #FF7500;
  --color-status-error: #FF0040;
}

.page-rails { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  display: grid; grid-template-columns: var(--col-inset) repeat(4, 1fr) var(--col-inset); }
.page-rails span { border-left: 0;
  background-image: linear-gradient(to bottom, var(--color-border-subtle) 0%, color-mix(in srgb, var(--color-border-strong) 15%, transparent) 100%);
  background-size: 1px 100%; background-repeat: no-repeat; background-position: left top; }
.page-rails span:first-child { background-image: none; }
body:has(.post) .page-rails { display: none; }
@keyframes fo-drift-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,12px); } }
@keyframes fo-drift-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-10px); } }
@keyframes fo-drift-c { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,-14px); } }
@media (max-width: 820px) {
.page-rails { display: none; }
}
/* FO design vars (unscoped) for the chrome + page background/rails/glow */
:root{
  --bevel: var(--radius-bevel, 18px);
  --stroke: 1.5px;
  --clip-tr: polygon(0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%);
  --page-edge: 48px;
  --page-margin: clamp(24px, 4vw, 64px);
  --col-inset: calc(var(--page-edge) + var(--page-margin));
  --cell-pad: clamp(24px, 2.2vw, 44px);
  --content-inset: calc(var(--col-inset) + var(--cell-pad));
  --accent-lead: var(--color-accent-1);
  --grad-brand: linear-gradient(95deg, var(--color-accent-4) 0%, var(--color-accent-2) 55%, var(--color-accent-1) 100%);
  --grad-orb:
    radial-gradient(60% 55% at 72% 22%, var(--color-accent-4) 0%, transparent 55%),
    radial-gradient(55% 55% at 26% 30%, var(--color-accent-2) 0%, transparent 55%),
    radial-gradient(65% 60% at 60% 68%, var(--color-accent-3) 0%, transparent 58%),
    radial-gradient(60% 60% at 24% 78%, var(--color-accent-1) 0%, transparent 60%),
    #2b2947;
}
[data-theme="dark"]{ --accent-lead: var(--color-accent-3); }
@media (max-width: 720px) {
:root{ --content-inset: 30px; }
}
@media (max-width: 560px) {
:root{ --type-size-h1: 40px; --type-size-h2: 30px; }
}
body.fo-page{background:var(--color-surface-1);}
body.fo-page .fo-scope{background:transparent;}
#edge-glow{position:fixed;left:0;right:0;bottom:0;height:45vh;z-index:-1;pointer-events:none;opacity:0;will-change:transform;background:radial-gradient(72% 92% at var(--gx1,14%) 100%,rgba(255,117,0,0.55),transparent 60%),radial-gradient(64% 92% at var(--gx2,50%) 100%,rgba(255,189,239,0.5),transparent 58%),radial-gradient(78% 96% at var(--gx3,88%) 100%,rgba(62,255,238,0.5),transparent 62%);filter:blur(32px);transition:opacity .3s ease;}