/* Bundle du design system Fullsoon — concatenation VERBATIM des 11
   feuilles, dans l'ordre exact du helmet. Aucune regle modifiee :
   seuls les @import locaux (dont le contenu est deja inline ci-dessous)
   ont ete retires, les @import Google remontes en tete comme l'exige
   la spec CSS, et les url() relatives rendues absolues.
   Genere — ne pas editer a la main. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ---- tokens/fonts.css ---- */
/* Product UI face. Nunito Sans is the face used throughout the Fullsoon
   mobile app and web app (1325+ usages in the source file). No binary was
   supplied, so it is served from Google Fonts. Montserrat is the secondary
   face found on a handful of legacy screens — also from Google Fonts. */


/* Brand / marketing faces. Satoshi's binary was supplied by the brand team
   and lives at assets/fonts/Satoshi-Variable.ttf. Inter and JetBrains Mono
   were only ever referenced, never actually copied into assets/fonts/ (their
   binaries exceed what can be pulled through this environment), so they load
   from Google Fonts instead — same mechanism as Nunito Sans/Montserrat above,
   same families, same weights the tokens below expect. */

@font-face{font-family:'Satoshi';src:url('/_ds/fullsoon-design-system-35a51091-6c38-489a-8d57-ae12c428156a/assets/fonts/Satoshi-Variable.ttf') format('truetype-variations');font-weight:300 900;font-style:normal;font-display:swap}

/* ---- tokens/colors.css ---- */
/* Every hex below is transcribed from the Fullsoon source (Figma mobile app
   file + web-app screenshots). Do not round or "harmonise" them. */
:root{
  /* ── Purple ramp (brand) ───────────────────────────────── */
  --purple-25:#FAF9FF;         /* faint page tint */
  --purple-50:#F0E9FA;         /* progress track, chip fill */
  --purple-100:#EDE4FE;
  --purple-200:#D8C7FB;
  --purple-300:#A477EA;        /* illustration mid-tone */
  --purple-400:#A87CFF;        /* brand light (marketing) */
  --purple-500:#8232FF;        /* web-app primary action */
  --purple-550:#873CFC;        /* mobile-app primary — the core brand purple */
  --purple-600:#7A2FFF;        /* illustration / deep fill */
  --purple-650:#7937ED;        /* marketing primary */
  --purple-700:#5521A8;        /* gradient end, deep purple */
  --purple-800:#3D1580;        /* marketing deep */

  /* ── Signal green (positive variation only) ────────────── */
  --green-50:#DDF7EC;
  --green-400:#38E8A0;         /* marketing signal green */
  --green-500:#38CD87;         /* app success stroke / fill */
  --green-600:#22C55E;
  --green-700:#00A667;         /* success text */

  /* ── Signal red / magenta (negative variation) ─────────── */
  --red-50:#FFE4EC;
  --red-500:#F61D5B;

  /* ── Warning ───────────────────────────────────────────── */
  --amber-50:#FFF6E0;
  --amber-600:#E2A400;

  /* ── Informational blue (secondary action) ─────────────── */
  --blue-500:#5B8DEF;

  /* ── Neutrals ──────────────────────────────────────────── */
  --white:#FFFFFF;
  --grey-25:#FAFAFA;
  --grey-50:#F8F9FD;           /* web-app canvas */
  --grey-75:#F2F2F9;           /* mobile-app canvas */
  --grey-100:#F2F2F9;
  --grey-150:#E6E6F0;          /* hairline border */
  --grey-200:#D9D9D9;
  --grey-300:#BBBBC4;          /* disabled / placeholder */
  --grey-400:#A1A1A1;
  --grey-500:#8C7BB3;          /* muted purple-grey (mobile meta) */
  --grey-600:#56546C;          /* body text, web app */
  --grey-700:#535353;          /* body text, mobile app */
  --grey-800:#2D2D2E;          /* status bar / near-black */
  --grey-900:#202121;
  --black:#000000;             /* headings in the mobile app */

  /* ── Dark brand surfaces (marketing / vitrine) ─────────── */
  --dark-bg:#0A0612;
  --dark-surface:#140E22;

  /* ═══ Semantic aliases ═════════════════════════════════ */
  --brand:var(--purple-550);
  --brand-strong:var(--purple-500);
  --brand-deep:var(--purple-700);
  --brand-soft:var(--purple-50);
  --brand-on:var(--white);

  --surface-page:var(--grey-75);
  --surface-page-web:var(--grey-50);
  --surface-card:var(--white);
  --surface-sunken:var(--grey-25);
  --surface-brand:var(--purple-550);
  --surface-overlay:rgba(255,255,255,0.10);

  --text-primary:var(--black);
  --text-body:var(--grey-700);
  --text-body-web:var(--grey-600);
  --text-muted:var(--grey-500);
  --text-disabled:var(--grey-300);
  --text-on-brand:var(--white);
  --text-brand:var(--purple-550);

  --border-hairline:var(--grey-150);
  --border-strong:var(--grey-200);
  --border-brand:var(--purple-400);

  --success:var(--green-500);
  --success-text:var(--green-700);
  --success-soft:var(--green-50);
  --danger:var(--red-500);
  --danger-soft:var(--red-50);
  --warning:var(--amber-600);
  --warning-soft:var(--amber-50);
  --info:var(--blue-500);

  /* Gradients lifted verbatim from the source */
  --gradient-brand:linear-gradient(191.045deg,#5521A8 37.71%,#873CFC 81.35%); /* @kind color */
  --gradient-brand-cta:linear-gradient(180deg,#8B4CF5 0%,#6B28D9 100%); /* @kind color */
  --gradient-splash:linear-gradient(135deg,#7A2FFF 0%,#A855F7 100%); /* @kind color */
  --gradient-image-scrim:linear-gradient(180deg,rgba(0,0,0,0) 34.13%,rgb(0,0,0) 100%); /* @kind color */
}

/* ---- tokens/typography.css ---- */
:root{
  /* Families */
  --font-ui:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-secondary:'Montserrat',var(--font-ui);
  --font-display:'Satoshi',var(--font-ui);      /* marketing headlines */
  --font-body:'Inter',var(--font-ui);           /* marketing body copy */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Weights actually used in the source */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:900; /* @kind font */

  /* Size scale — every value observed in the source file, unrounded */
  --fs-5:5px;   --fs-6:6px;   --fs-7:7px;   --fs-8:8px;   --fs-9:9px; /* @kind font */
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; /* @kind font */
  --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-19:19px; /* @kind font */
  --fs-20:20px; --fs-22:22px; --fs-23:23px; --fs-24:24px; --fs-26:26px; /* @kind font */
  --fs-27:27px; --fs-32:32px; --fs-38:38px; /* @kind font */

  /* Tracking — the app sets -2% on virtually all text */
  --ls-tight:-0.04em; /* @kind font */
  --ls-app:-0.02em; /* @kind font */
  --ls-normal:0; /* @kind font */
  --ls-eyebrow:0.12em; /* @kind font */

  /* Leading */
  --lh-flush:100%; /* @kind font */   /* the app's default: line-height 100% on single-line labels */
  --lh-snug:1.25; /* @kind font */
  --lh-body:1.6; /* @kind font */

  /* Composed roles — mobile & web product UI */
  --type-display:var(--fw-black) var(--fs-26)/1.1 var(--font-ui); /* @kind font */
  --type-h1:var(--fw-extrabold) var(--fs-26)/1.15 var(--font-ui); /* @kind font */
  --type-h2:var(--fw-extrabold) var(--fs-18)/1.2 var(--font-ui); /* @kind font */
  --type-h3:var(--fw-extrabold) var(--fs-14)/1.2 var(--font-ui); /* @kind font */
  --type-body:var(--fw-medium) var(--fs-15)/1.45 var(--font-ui); /* @kind font */
  --type-body-sm:var(--fw-medium) var(--fs-13)/1.45 var(--font-ui); /* @kind font */
  --type-label:var(--fw-bold) var(--fs-14)/var(--lh-flush) var(--font-ui); /* @kind font */
  --type-caption:var(--fw-semibold) var(--fs-12)/var(--lh-flush) var(--font-ui); /* @kind font */
  --type-micro:var(--fw-bold) var(--fs-10)/var(--lh-flush) var(--font-ui); /* @kind font */
  --type-kpi:var(--fw-extrabold) var(--fs-32)/1 var(--font-ui); /* @kind font */
}

/* ---- tokens/spacing.css ---- */
:root{
  /* The app's real rhythm: a 390px mobile frame with a 25px side gutter,
     cards 346px wide, 157px tiles, 32px inter-card gap. */
  --space-2:2px;  --space-4:4px;  --space-5:5px;  --space-6:6px;
  --space-8:8px;  --space-10:10px; --space-12:12px; --space-13:13px;
  --space-16:16px; --space-18:18px; --space-20:20px; --space-23:23px;
  --space-25:25px; --space-28:28px; --space-32:32px; --space-40:40px;
  --space-48:48px; --space-56:56px; --space-64:64px;

  --gutter-mobile:25px; /* @kind spacing */   /* 390 - 2*25 = 340 content */
  --gutter-web:32px; /* @kind spacing */
  --card-gap:12px; /* @kind spacing */
  --tile:157px; /* @kind spacing */           /* product tile in the mobile inventory grid */
  --frame-mobile:390px; /* @kind spacing */
  --frame-mobile-h:844px; /* @kind spacing */
  --sidebar-web:88px; /* @kind spacing */

  --control-h-sm:33px; /* @kind spacing */
  --control-h:46px; /* @kind spacing */
  --control-h-lg:56px; /* @kind spacing */
  --icon-btn:38px; /* @kind spacing */        /* circular header icon button, mobile */
  --touch-min:44px; /* @kind spacing */
}

/* ---- tokens/radius.css ---- */
:root{
  --radius-xs:5px;    /* legacy Figma selector components */
  --radius-sm:8px;
  --radius-md:12px;   /* buttons */
  --radius-lg:16px;
  --radius-card:23px; /* the product tile / card radius in the app */
  --radius-xl:28px;
  --radius-panel:32px;
  --radius-frame:40px; /* device frame, splash panels */
  --radius-pill:100px;
  --radius-full:9999px;
}

/* ---- tokens/elevation.css ---- */
:root{
  /* Shadows in the source are soft, black, low-alpha and vertically offset —
     never coloured inside the product. Marketing surfaces use the purple
     variants at the bottom of this list. */
  --shadow-hairline:0 4px 4px rgba(0,0,0,0.08);
  --shadow-tile:0 4px 4px rgba(0,0,0,0.08);
  --shadow-card:0 0 14px rgba(0,0,0,0.08);
  --shadow-card-soft:0 2px 12px rgba(0,0,0,0.07);
  --shadow-raised:0 6px 18px rgba(0,0,0,0.09);
  --shadow-float:0 8px 24px rgba(0,0,0,0.10);
  --shadow-modal:0 12px 40px rgba(0,0,0,0.25);
  --shadow-scrim:0 4px 21px rgba(0,0,0,0.20);
  --shadow-deep:0 20px 60px rgba(0,0,0,0.56);

  /* Selection rings, drawn as spread-0 outlines in the source */
  --ring-success:0 0 0 1px #38CD87; /* @kind shadow */
  --ring-brand:0 0 0 1px #873CFC; /* @kind shadow */
  --ring-danger:0 0 0 1px #F61D5B; /* @kind shadow */

  /* Marketing-only: desaturated purple shadows */
  --shadow-brand-cta:0 8px 24px rgba(121,55,237,0.35);
  --shadow-brand-glow:0 0 60px rgba(168,124,255,0.25);

  --blur-glass:blur(20px); /* @kind shadow */
}

/* ---- tokens/motion.css ---- */
:root{
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --ease-standard:cubic-bezier(0.2,0,0.2,1); /* @kind other */
  --dur-hover:200ms; /* @kind other */
  --dur-press:120ms; /* @kind other */
  --dur-reveal:600ms; /* @kind other */
  --transition-hover:all var(--dur-hover) var(--ease-out-expo); /* @kind other */
  --transition-reveal:all var(--dur-reveal) var(--ease-out-expo); /* @kind other */
}

/* ---- tokens/base.css ---- */
/* Minimal global defaults. Kept deliberately small — consumers compose
   with the component library, not with utility classes. */
body{font-family:var(--font-ui);color:var(--text-body);letter-spacing:var(--ls-app);-webkit-font-smoothing:antialiased}
a{color:var(--text-brand);text-decoration:none;transition:var(--transition-hover)}
a:hover{color:var(--purple-500);text-decoration:underline}
.fs-tabular{font-variant-numeric:tabular-nums}
.fs-eyebrow{font-family:var(--font-mono);text-transform:uppercase;font-size:0.75rem;letter-spacing:var(--ls-eyebrow);color:var(--purple-400)}

/* ---- components/figma/fig-tokens.css ---- */
/* Generated from the Figma file's Variable collections, then prefixed.

   The mobile-app file exposes ONE variable collection containing four
   swatches (lime/orange/pink/purple 500). It is a leftover sample palette,
   not the Fullsoon brand ramp — the real brand values live in
   tokens/colors.css. The names are prefixed with `fig-` here so they cannot
   shadow the brand tokens; keep them only for traceability back to the file. */

:root {
  --fig-lime-500: rgb(132,204,22); /* @kind color */
  --fig-orange-500: rgb(249,115,22); /* @kind color */
  --fig-pink-500: rgb(236,72,153); /* @kind color */
  --fig-purple-500: rgb(168,85,247); /* @kind color */
}

/* ---- components/figma/fig-typography.css ---- */
/* No TEXT/EFFECT styles in this file. */

/* ---- styles.css ---- */
/* Fullsoon Design System — global CSS entry point.
   Consumers link this one file. Imports only. */