/* ============================================================
   PRINTIBLY · Color & Type Foundations  (design-system source)
   Adopted verbatim from the redesign handover
   (design_handoff_reorder_portal/printibly-tokens.css) as the
   token source of truth for the customer portal.

   Linked in index.html BEFORE app.css so the portal's existing
   :root vars (app.css) still win on any name collision — this file
   only ADDS the new token names (--ink-*, --primary-*, --accent-*,
   --pb-gradient, --warning-bg, --success-bg, etc.) the redesign
   screens consume. Nothing here overrides the live look.

   Brand gradient sampled from the logo mark:
   deep purple #693594 → magenta #BC2E91 → pink #CE3590 → coral #F1603F
   ============================================================ */

/* Plus Jakarta Sans (display + UI) — the portal body font stays Inter;
   the redesign screens opt in to Jakarta explicitly. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  /* ---------- Brand core ---------- */
  --pb-purple-deep: #4E2470;
  --pb-purple:      #693594;
  --pb-magenta:     #BC2E91;
  --pb-pink:        #CE3590;
  --pb-coral:       #F1603F;
  --pb-coral-soft:  #F77E54;

  /* Signature gradients */
  --pb-gradient:        linear-gradient(115deg, #693594 0%, #BC2E91 42%, #CE3590 62%, #F1603F 100%);
  --pb-gradient-soft:   linear-gradient(115deg, #7E45AC 0%, #C742A0 50%, #F4744E 100%);
  --pb-gradient-vert:   linear-gradient(160deg, #693594 0%, #BC2E91 50%, #F1603F 100%);
  --pb-gradient-text:   linear-gradient(100deg, #7E2BA6 0%, #CE3590 55%, #F1603F 100%);

  /* ---------- Primary (magenta) interactive scale ---------- */
  --primary-50:  #FCEAF5;
  --primary-100: #F8CFE8;
  --primary-200: #F0A3D2;
  --primary-300: #E471B8;
  --primary-400: #D4479F;
  --primary-500: #BC2E91;  /* base */
  --primary-600: #A02079;
  --primary-700: #7E1A60;
  --primary-800: #5C1547;
  --primary-900: #3D0E30;

  /* ---------- Accent (coral) scale ---------- */
  --accent-50:  #FEEDE7;
  --accent-100: #FCD3C5;
  --accent-200: #F9AC92;
  --accent-300: #F58661;
  --accent-400: #F1603F;  /* base */
  --accent-500: #E04A2A;
  --accent-600: #BC3A1F;

  /* ---------- Violet (purple) scale ---------- */
  --violet-100: #EADDF4;
  --violet-300: #B186D4;
  --violet-500: #693594;  /* base */
  --violet-700: #4E2470;

  /* ---------- Ink / neutrals (warm, faint violet tint) ---------- */
  --ink-900: #1C1B1F;  /* wordmark black — strongest text */
  --ink-800: #2C2A33;
  --ink-700: #3A383F;
  --ink-600: #56535F;
  --ink-500: #6B6873;  /* secondary text */
  --ink-400: #918E99;  /* muted / placeholder */
  --ink-300: #C7C4CE;  /* disabled, strong border */
  --ink-200: #E4E1EA;  /* default border */
  --ink-100: #F1EFF4;  /* hairline / track */
  --ink-50:  #F8F7FB;  /* subtle surface */
  --white:   #FFFFFF;

  /* ---------- Semantic ---------- */
  --success:    #1F9D57;
  --success-bg: #E6F5EC;
  --warning:    #E0930C;
  --warning-bg: #FBF0D9;
  --danger:     #E23B3B;
  --danger-bg:  #FCE8E8;
  --info:       #2A6FDB;
  --info-bg:    #E7F0FC;

  /* ---------- Surface / text roles ----------
     NOTE: --surface / --bg / --border / --border-strong ALSO exist in
     app.css :root with the live portal's values. app.css is linked
     AFTER this file, so those live values win; the names below only
     apply where app.css does not define them (--bg-subtle, --bg-inset). */
  --bg-subtle:     #F8F7FB;
  --bg-inset:      #F1EFF4;
  --surface-dark:  #1C1B1F;
  --fg-on-brand:   #FFFFFF;
  --focus-ring:    rgba(188, 46, 145, 0.40);

  /* ---------- Typography ---------- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  --tracking-tight:   -0.02em;
  --tracking-overline:0.14em;
}