/* Fresko Social — design tokens.
   FAITHFUL to the Figma source: white surface, slate text scale, indigo
   primary, magenta accent. Numeric values come directly from the metadata
   (rgb 255,255,255 / 30,41,59 / 79,70,229 / 239,63,185 etc).
   Only the *naming* is new; the colors are not. */

:root {
  /* Page surfaces ---------------------------------------------------- */
  --fs-bg:           #ffffff;   /* rgb(255,255,255) */
  --fs-bg-2:         #f8fafc;   /* rgb(248,250,252) — hover, soft fills */
  --fs-bg-3:         #f1f5f9;   /* rgb(241,245,249) — light section bg */
  --fs-surface:      #ffffff;
  --fs-surface-2:    #f8fafc;
  --fs-border:       #e2e8f0;   /* rgb(226,232,240) */
  --fs-border-soft:  #f1f5f9;
  --fs-border-strong:#cbd5e1;   /* rgb(203,213,225) */

  /* Ink + text scale (matches the Figma slate ramp) ----------------- */
  --fs-ink:          #1e293b;   /* rgb(30,41,59) — primary headings/text */
  --fs-text:         #1e293b;
  --fs-text-700:     #334155;   /* rgb(51,65,85) */
  --fs-text-600:     #475569;   /* rgb(71,85,105) */
  --fs-text-500:     #64748b;   /* rgb(100,116,139) */
  --fs-text-400:     #94a3b8;   /* rgb(148,163,184) */
  --fs-text-300:     #cbd5e1;

  /* Brand — Indigo (the Figma's CTA palette, unchanged) ------------- */
  --fs-indigo-900:   #3a3470;   /* rgb(58,52,112) */
  --fs-indigo-800:   #4c4595;   /* rgb(76,69,149) — primary CTA */
  --fs-indigo-700:   #5e57b5;   /* rgb(94,87,181) — links, pagination active */
  --fs-indigo-600:   #4f46e5;   /* rgb(79,70,229) — selected/strong indigo */
  --fs-indigo-500:   #6c66c4;
  --fs-indigo-200:   #c7c4ec;
  --fs-indigo-100:   #e0e7ff;
  --fs-indigo-50:    #eef2ff;   /* rgb(238,242,255) — selected fill */

  /* Accent — Magenta (eyebrows + focal highlights only) ------------- */
  --fs-magenta-700:  #ae2f8a;   /* rgb(174,47,138) */
  --fs-magenta-600:  #df239c;   /* rgb(223,35,156) */
  --fs-magenta-500:  #ef3fb9;   /* rgb(239,63,185) */
  --fs-magenta-100:  #fce7f7;   /* rgb(252,231,247) */
  --fs-magenta-50:   #fdf2fa;   /* rgb(253,242,250) */

  /* Amber — kept for occasional "tip" surfaces (figma's #fff8e6) ---- */
  --fs-amber-bg:     #fff8e6;
  --fs-amber-border: #f5d77a;
  --fs-amber-ink:    #92561b;

  /* Functional ------------------------------------------------------- */
  --fs-success:      #16a34a;
  --fs-warn:         #e08a17;

  /* Brand-platform colors (used only inside small icon tiles) ------- */
  --fs-ig:           #d62976;
  --fs-li:           #0a66c2;
  --fs-tt:           #0c111d;
  --fs-x:            #0c111d;

  /* Type stack ------------------------------------------------------- */
  --fs-font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radii (matches the Figma's rounded language) -------------------- */
  --fs-r-xs: 8px;
  --fs-r-sm: 12px;
  --fs-r-md: 16px;
  --fs-r-lg: 22px;
  --fs-r-xl: 28px;
  --fs-r-2xl:36px;
  --fs-r-pill: 999px;

  /* Shadows — soft, premium (matches figma's quiet shadow scale) ---- */
  --fs-shadow-card:        0 1px 1px rgba(16,24,40,.03), 0 8px 24px -10px rgba(16,24,40,.08);
  --fs-shadow-lift:        0 4px 12px -2px rgba(16,24,40,.05), 0 24px 48px -16px rgba(16,24,40,.14);
  --fs-shadow-input:       0 0 0 1px var(--fs-border) inset;
  --fs-shadow-input-active:0 0 0 2px var(--fs-indigo-600) inset, 0 0 0 6px var(--fs-indigo-100);
  --fs-shadow-cta:         0 10px 22px -8px rgba(76,69,149,.42), inset 0 -2px 0 rgba(0,0,0,.10);

  /* Motion ----------------------------------------------------------- */
  --fs-ease:         cubic-bezier(.22,.61,.36,1);
  --fs-ease-in:      cubic-bezier(.55,.06,.68,.19);
  --fs-ease-out:     cubic-bezier(.22,.61,.36,1);
  --fs-spring:       cubic-bezier(.34,1.56,.64,1);
}

/* Keyframes shared across the prototype ----------------------------- */
@keyframes fs-fade-in       { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-fade-up       {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fs-fade-down     {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fs-pulse-ring    {
  0%   { transform: scale(.9);  opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes fs-shimmer       {
  0%   { background-position: -180% 0; }
  100% { background-position:  180% 0; }
}
@keyframes fs-spin          { to { transform: rotate(360deg); } }
@keyframes fs-scan          { from { top: -2%; } to { top: 102%; } }
@keyframes fs-rise          { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fs-fall-in       {
  from { opacity: 0; transform: translateY(-24px) rotate(-3deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes fs-blink         { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes fs-drift         {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}