/* SocialFolio design system — shared tokens, self-hosted fonts and cross-page components.
   Loaded on every page BEFORE the area stylesheet (marketing.css, app.css, portfolio.css). */

@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/dm-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dm-sans-latin-700-normal.woff2) format("woff2")}

:root{
  /* Brand */
  --sf-purple:#7654e8;
  --sf-purple-dark:#6040d2;
  --sf-purple-soft:#f0edff;
  --sf-pink:#e7a4e9;
  --sf-pink-strong:#d46eb9;
  --sf-pink-soft:#fff0f8;
  --sf-gradient:linear-gradient(110deg,#7654e8,#9464ed);
  --sf-gradient-text:linear-gradient(105deg,#7855e8 5%,#a15fe2 52%,#db87c8 100%);
  /* Neutrals */
  --sf-ink:#17151e;
  --sf-ink-soft:#4f4b5b;
  --sf-muted:#6f6c79;
  --sf-line:#eceaf2;
  --sf-surface:#faf9fc;
  --sf-white:#fff;
  /* States */
  --sf-success:#22a98e;
  --sf-success-soft:#e8faf5;
  --sf-warning:#b98b38;
  --sf-warning-soft:#fff6e4;
  --sf-danger:#c2416b;
  --sf-danger-soft:#fff0f4;
  --sf-focus:0 0 0 3px rgba(118,84,232,.25);
  /* Type */
  --sf-font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sf-display:"Manrope","DM Sans",system-ui,sans-serif;
  /* Editor aliases (campaign editor stylesheet) */
  --ink:#24213a;--ink-soft:#5e5a73;--line-strong:#e3dfef;--surface:#fff;--surface-soft:#faf9fc;
  --lavender:#7654e8;--lavender-dark:#6040d2;--lavender-soft:#f0edff;--pink-soft:#fff0f6;--green:#42a987;
  --shadow:0 12px 35px rgba(43,31,88,.055);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:var(--sf-purple-dark);padding:10px 14px;border-radius:8px;font-weight:700;box-shadow:0 8px 24px rgba(30,20,60,.15)}
.skip-link:focus{top:12px}
[hidden]{display:none!important}

/* Flash messages */
.flash-stack{position:fixed;top:18px;right:18px;z-index:120;display:grid;gap:8px;max-width:min(420px,calc(100% - 36px))}
.flash{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--sf-line);border-left:4px solid var(--sf-purple);border-radius:10px;padding:12px 14px;box-shadow:0 12px 35px rgba(37,27,69,.13);font:600 13px/1.5 var(--sf-font);color:#2b2738}
.flash-success{border-left-color:var(--sf-success)}
.flash-error{border-left-color:var(--sf-danger)}
.flash-info{border-left-color:var(--sf-purple)}
.flash button{margin-left:auto;border:0;background:transparent;color:#9a96a6;font-size:16px;line-height:1;cursor:pointer;padding:0 2px}

/* Generic toast (marketing + portfolio) */
.sf-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#24213a;color:#fff;padding:12px 17px;border-radius:10px;box-shadow:0 10px 30px rgba(32,34,56,.17);font:500 13px var(--sf-font);opacity:0;pointer-events:none;transition:.22s;z-index:130;max-width:calc(100% - 30px)}
.sf-toast.show{opacity:1;transform:translate(-50%,0)}

/* Cookie consent banner + preferences */
.cookie-banner{position:fixed;left:18px;right:18px;bottom:18px;z-index:140;max-width:760px;margin:0 auto;background:#fff;border:1px solid #e9e4f2;border-radius:16px;box-shadow:0 22px 60px rgba(37,27,69,.18);padding:20px 22px;font-family:var(--sf-font);color:#2b2738}
.cookie-banner h2{font:800 16px/1.3 var(--sf-display);letter-spacing:-.3px;margin:0 0 6px}
.cookie-banner p{font-size:13px;line-height:1.6;color:#6f6a7a;margin:0 0 14px}
.cookie-banner a{color:var(--sf-purple-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.cookie-btn{border:1px solid #e3ddef;background:#fff;color:#3b3550;border-radius:9px;padding:10px 15px;font:700 12px var(--sf-font);cursor:pointer}
.cookie-btn:hover{border-color:#cfc6f5;background:#faf8ff}
.cookie-btn.primary{background:var(--sf-purple);border-color:var(--sf-purple);color:#fff}
.cookie-btn.primary:hover{background:var(--sf-purple-dark)}
.cookie-btn:focus-visible{outline:none;box-shadow:var(--sf-focus)}
.cookie-prefs{display:grid;gap:10px;margin:4px 0 16px}
.cookie-pref{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border:1px solid #efecf5;border-radius:11px;padding:12px 14px}
.cookie-pref strong{display:block;font-size:13px}
.cookie-pref small{display:block;font-size:12px;color:#7b7688;margin-top:3px;line-height:1.5}
.cookie-pref input{width:18px;height:18px;accent-color:var(--sf-purple);margin-top:2px;flex-shrink:0}
.cookie-pref .always{font-size:11px;font-weight:700;color:var(--sf-success);white-space:nowrap}

/* Share menu (portfolio + marketing) */
.share-panel{display:grid;gap:6px;min-width:230px}
.share-option{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:9px;font:600 13px var(--sf-font);color:#3b3550;cursor:pointer;text-decoration:none}
.share-option:hover,.share-option:focus-visible{background:#f6f3ff;color:var(--sf-purple-dark);outline:none}
.share-option img,.share-option svg{width:17px;height:17px}

/* Form errors (shared) */
.form-error{color:var(--sf-danger);font-size:12px;font-weight:600;margin-top:6px}
.input-error{border-color:#e58da8!important}

@media (max-width:560px){.cookie-banner{left:10px;right:10px;bottom:10px;padding:18px}.cookie-actions{justify-content:stretch}.cookie-btn{flex:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}