/* Curato Advisory — design tokens + site rules. Generated for production. */

/* tokens/fonts.css */
/* Webfonts. Lora (display) + Inter (body), per the Curato typography decision on record.
   Both are SIL Open Font License and served from Google Fonts; no local binaries required.
   An Adobe Fonts kit serving Lora also exists (https://use.typekit.net/ezw0yvp.css, family "lora")
   but Google Fonts is the recommended source to avoid domain-authorization issues. */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap");


/* tokens/colors.css */
:root{
/* ---- Brand ramp (exact values from the Curato brand guidelines deck) ---- */
--curato-navy:#1F283D;      /* deep navy — stability, confidence */
--curato-blue:#2E4774;      /* brand blue — primary interactive */
--curato-blue-mid:#6BA1D0;  /* mid blue — approachability */
--curato-cyan:#A2E5F6;      /* light cyan — subtle highlight */
--curato-red:#CB4545;       /* red — graphic emphasis ONLY */

/* ---- Neutral ramp (derived surfaces; not in the printed deck) ---- */
--white:#FFFFFF;
--neutral-50:#F7FAFC;
--neutral-100:#EEF3F8;
--neutral-200:#DCE3EA;
--neutral-300:#C3CDD8;
--neutral-500:#7A8798;
--neutral-700:#48546A;

/* ---- Semantic aliases (use these in components) ---- */
--color-primary:#2E4774;
--color-primary-hover:#1F283D;
--color-primary-dark:#1F283D;
--color-accent:#CB4545;         /* accent bar + pulse motif only — never buttons, links or text */
--color-blue:#6BA1D0;
--color-cyan:#A2E5F6;

--color-ink:#1F283D;
--color-ink-muted:rgba(31,40,61,0.62);
--color-ink-subtle:rgba(31,40,61,0.45);
--color-ink-inverse:#FFFFFF;
--color-ink-inverse-muted:rgba(255,255,255,0.72);

--color-surface:#FFFFFF;
--color-surface-alt:#EEF3F8;
--color-surface-sunken:#F7FAFC;
--color-surface-dark:#1F283D;
--color-surface-dark-alt:#2E4774;

--color-border:#DCE3EA;
--color-border-strong:#C3CDD8;
--color-border-inverse:rgba(255,255,255,0.18);

--color-link:#2E4774;
--color-link-hover:#1F283D;
--color-focus:#6BA1D0;

/* ---- Status (derived; navy/blue family so nothing competes with the red accent) ---- */
--color-success:#2F6B54;
--color-warning:#8A5A16;
--color-danger:#CB4545;
--color-info:#2E4774;
}


/* tokens/typography.css */
:root{
--font-display:'Lora',Georgia,'Times New Roman',serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

/* 1.250 scale */
--text-hero:4rem;      /* 64px — hero H1 desktop */
--text-hero-sm:3.5rem; /* 56px */
--text-h1:2.75rem;     /* 44px */
--text-h2:2rem;        /* 32px */
--text-h3:1.5rem;      /* 24px */
--text-lead:1.25rem;   /* 20px */
--text-body:1.0625rem; /* 17px */
--text-small:0.875rem; /* 14px */
--text-eyebrow:0.75rem;/* 12px, uppercase, tracked */

--weight-body:400;
--weight-medium:500;
--weight-semibold:600;
--weight-display:600;
--weight-display-bold:700;

--leading-tight:1.15;  /* headings */
--leading-snug:1.35;
--leading-body:1.6;    /* body copy */

--tracking-eyebrow:0.14em;
--tracking-wordmark:0.22em;
--tracking-tight:-0.01em;

--measure:68ch;        /* body measure: 60-75 characters */
}


/* tokens/spacing.css */
:root{
/* 8px base */
--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;
--space-32:128px;

--section-y:112px;      /* desktop section padding (96-128) */
--section-y-mobile:64px;/* mobile section padding (56-72) */
--container:1240px;     /* 1200-1280 */
--gutter:24px;

--bp-sm:640px;
--bp-md:768px;
--bp-lg:1024px;
--bp-xl:1280px;
}


/* tokens/radius.css */
:root{
--radius-sm:6px;
--radius:10px;    /* default — held consistently (8-12px) */
--radius-lg:12px;
--radius-pill:999px; /* pills are for small tags only, never for buttons */
--hairline:1px;
--accent-bar-w:4px;   /* red section-title bar */
--accent-bar-h:28px;
}


/* tokens/elevation.css */
:root{
/* soft, low shadows only */
--shadow-sm:0 1px 2px rgba(31,40,61,0.06);
--shadow:0 2px 8px rgba(31,40,61,0.07);
--shadow-md:0 6px 20px rgba(31,40,61,0.09);
--shadow-lift:0 12px 28px rgba(31,40,61,0.12); /* card hover only */
--shadow-inset-hairline:inset 0 0 0 1px var(--color-border);
--ring-focus:0 0 0 3px rgba(107,161,208,0.45);
}


/* tokens/motion.css */
:root{
--ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur:220ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-reveal:640ms; /* @kind other */   /* scroll-reveal fades */
--dur-pulse:1600ms; /* @kind other */   /* pulse line draw-in, hero moment */
--lift:-2px;          /* card hover translate */
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms; /* @kind other */--dur:0ms; /* @kind other */--dur-slow:0ms; /* @kind other */--dur-reveal:0ms; /* @kind other */--dur-pulse:0ms; /* @kind other */--lift:0px}}


/* tokens/base.css */
/* Element defaults. Kept intentionally light — components carry their own styling. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-ink);background:var(--color-surface);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-4)}
h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}
p{margin:0 0 var(--space-4);max-width:var(--measure);text-wrap:pretty}
a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color var(--dur) var(--ease-standard)}
a:hover{color:var(--color-link-hover)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
small{font-size:var(--text-small)}


/* masked icon glyphs (Lucide) */
.ci{display:inline-block;flex:0 0 auto;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* client-rendered commentary cards */
.hv-lift:hover{box-shadow:0 12px 28px rgba(31,40,61,0.16)!important;transform:translateY(-2px)!important}
.hv-cta-navy:hover{background:#2A3550!important}
@keyframes mcPulse{0%{opacity:.45}50%{opacity:.9}100%{opacity:.45}}

/* interactive states carried over from the source components */
.x0:hover{color:#FFFFFF !important;border-bottom-color:#E8E9E4 !important}
.x1:hover{background:#E8E9E4 !important;color:#2A3550 !important}
.x2:hover{background:#FFFFFF !important}
.x3:hover{background:#66707A !important;color:#FFFFFF !important}
.x4:hover{background:#1B3A52 !important;color:#FFFFFF !important}
.x5:hover{transform:translateY(-4px) !important;box-shadow:0 12px 28px rgba(31,40,61,0.14) !important;border-color:#1B3A52 !important}
.x6:hover{transform:translateY(-4px) !important}
.x7:hover{background:#2A3550 !important}
.x8:hover{color:#FFFFFF !important}
.x9:hover{background:#FFFFFF !important;color:#1B3A52 !important}
.x10:hover{background:#D2D6DA !important}
.x11:hover{box-shadow:0 6px 20px rgba(31,40,61,0.10) !important}
.x12:hover{background:#FFFFFF !important;color:#2A3550 !important}
.x13:hover{background:#E8E9E4 !important}
.x14:hover{transform:translateY(-2px) !important;box-shadow:0 12px 28px rgba(31,40,61,0.22) !important}
.x15:hover{transform:translateY(-2px) !important;box-shadow:0 12px 28px rgba(31,40,61,0.12) !important}